<small id='8n0XCo1'></small> <noframes id='8vQp0'>

  • <tfoot id='b5KS'></tfoot>

      <legend id='rLe89Jsi'><style id='bA4NFRuri'><dir id='WbBGdoS'><q id='vgoq'></q></dir></style></legend>
      <i id='DjdaBY'><tr id='Xijg9tP8dx'><dt id='Rg9pS'><q id='wPVlF6E'><span id='nlO1E'><b id='5TUi9sR'><form id='tBriVNhp2w'><ins id='jOGm'></ins><ul id='ZUkyzPOeB'></ul><sub id='JYx9wZr'></sub></form><legend id='ELWu'></legend><bdo id='0e4SaQgpy'><pre id='HhFS7'><center id='ZiJh0H'></center></pre></bdo></b><th id='9yiVu'></th></span></q></dt></tr></i><div id='U6TN5'><tfoot id='WE4OMjgL'></tfoot><dl id='iPoY0'><fieldset id='RLQF8'></fieldset></dl></div>

          <bdo id='Pm2jh9z'></bdo><ul id='YLBo0TKkqw'></ul>

          1. <li id='Epj3l'></li>
            登陆

            「React组件封装」「实例」FontAwesome图标组件封装

            admin 2019-11-01 231人围观 ,发现0个评论

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

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

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

            i class="fa fa-times" >

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

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

            于是:(预留props:name、color、size、larger、className和其他)

            import React, { PureComponent } from 'react';
            i「React组件封装」「实例」FontAwesome图标组件封装mport '../.邱宏涛./../common_css/font_awesome/css/font-awesome.min.css'

            class Icon extends PureComponent {
            constructor(props) {
            sup「React组件封装」「实例」FontAwesome图标组件封装er(props);
            }「React组件封装」「实例」FontAwesome图标组件封装

            render() {
            const {name, color, size, className, larger, ...others} = this.props
            let the_class_name = "fa fa「React组件封装」「实例」FontAwesome图标组件封装-"+name
            if (clas「React组件封装」「实例」FontAwesome图标组件封装sName) {
            the_class_name += ' '+className
            }
            if (larger) {
            the_class_name += ' '+'fa-'+larger
            }
            return (

            style={{
            color: color,
            fontSize: size,
            }}
            {...others}
            >
            {this.props.children}

            );
            }
            }

            export default Icon;
            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP