<small id='UEfJA'></small> <noframes id='zwLZ'>

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

      <legend id='tFcq6P'><style id='rNFgV35Yc'><dir id='ib2c19P'><q id='zIw5sNV'></q></dir></style></legend>
      <i id='MDQ5Wa1w'><tr id='jQDzJ12'><dt id='FBK7X'><q id='c1EAOd'><span id='w0TSR4m'><b id='zrdJgaj2I'><form id='9iy2jB'><ins id='nZlSVW'></ins><ul id='KgmN'></ul><sub id='PWg7u386'></sub></form><legend id='cUYhKv'></legend><bdo id='OP8401CU'><pre id='s5v80S'><center id='FkNO0bvl'></center></pre></bdo></b><th id='3SMu9'></th></span></q></dt></tr></i><div id='UGoxEfq'><tfoot id='LADq'></tfoot><dl id='FyZxsz'><fieldset id='KoO9TM0'></fieldset></dl></div>

          <bdo id='bDaZ1c'></bdo><ul id='zXB1n'></ul>

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

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

            admin 2019-11-01 340人围观 ,发现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