React-3 组件知识

2、外部导入

（1） 注意好外部css文件，在js中使用import引入

（2）注意：class属性建议写为className

五、ref获取dom

1、示例

  可以通过 this.refs.myword获取p标签

'myword'>你好

  注意：refs将要被弃用，在严格模式下会报错

2、新写法

myRef = React.createRef()
this.myRef}>

3、如果ref绑定到组件上，我们会获取这个组件

六、列表渲染

1、使用js原生的map方法

        {
    this.state.arr.map(item => <li key={item.id}>{item}li>)
        }

2、为了列表带的复用与重排，设置key值，提高性能

七、条件渲染

1、三元运算符：条件？

yes

:

no

render() {
    const {type} = this.state
    return (
        <div>
            {
                //利用三元运算符渲染需要渲染的变量
                type === 优秀 ? <h2>type值等于优秀h2> : 
                <h2 className="score">type值不等于优秀h2>
            }
        div>
    );
}
 

2、与运算（&&）：条件 &&

ok

render() {
    const {type} = this.state
    return (
        <div>
            {type === 优秀 && <h2>type值等于优秀h2>}
            {type !== 优秀 && <h2 className="score">type值不等于优秀h2>}
        div>
    );
}

八、富文本展示

    {__html: 富文本}
    }>

九、事件处理

1、事件绑定：on + 事件名称 = { fn }

this.myclick}>1
<button onClick={() => {
     console.log(this)
}}>1button>
<button onClick={this.ok.bind(this)}>1button>
<button onClick={() => this.yes() //比较推荐}>1button>

  注意：这里要用驼峰命名法 

2、React并不会绑定一个事件到具体的元素上，而是采用事件代理的模式