react组件库怎样写：React组件封装实例

react组件库怎样写：React组件封装实例所以如果要封装这个组件，css需要在组件内部引入。(如果使用了webpack的css模块化，这个css文件需要排除)于是：（预留props：name、color、size、larger、className和其他）import React { PureComponent } from 'react'; import '../../../common_css/font_awesome/css/font-awesome.min.css' class Icon extends PureComponent { constructor(props) { super(props); } render() { const {name color size className larger ...others} = this.props let the_class_name

FontAwesome是前端开发常用了一种图标字体。

在React中使用可以使用对应的库，但是感觉不怎么好用。

另一种方式就是通过import 'font-awesome.min.css'，然后

i class="fa fa-times" ></i>

这种使用方式缺点是每次需要引入 font-awesome.min.css，但是如果忘记引入，而且前置页面引入了，有时候也能正常显示，但是如果前置页面没有引入，显示就不正常了。所以即使出现问题了，也不容易发现。

所以如果要封装这个组件，css需要在组件内部引入。(如果使用了webpack的css模块化，这个css文件需要排除)

于是：（预留props：name、color、size、larger、className和其他）

import React { PureComponent } from 'react'; import '../../../common_css/font_awesome/css/font-awesome.min.css' class Icon extends PureComponent { constructor(props) { super(props); } render() { const {name color size className larger ...others} = this.props let the_class_name = "fa fa-" name if (className) { the_class_name = ' ' className } if (larger) { the_class_name = ' ' 'fa-' larger } return ( <i className={the_class_name} style={{ color: color fontSize: size }} {...others} > {this.props.children} </i> ); } } export default Icon;