ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML

1、一般针对输入框：

推荐用第二种

<input type = "text" ref = "inp"/>
通过this.refs.inp可以访问这个input框
即：this.refs.inp.value就是input框里面的内容

<input type = "text" ref = { el => this.inp = el }/>
通过el就会少一层，el代表的就是这个input标签
即：this.inp.value就是input框里面的内容

2、class是原生关键字，写类名用className代替

3、输入框的value使用也会报错，用defaultValue代替

4、列表渲染，注意加key值

import React , { Component } from 'react'

const Item = props => {{/*定义一个函数组件*/}
    return (
        <li>{ props.task }</li>
    )
}

class ListLoop extends Component {

    constructor () {{/*构造器定义状态数据*/}
        super()
        this.state = {
            todos:[
                {
                    id:1,
                    task:'任务一',
                },
                {
                    id:2,
                    task:'任务二',
                },
                {
                    id:3,
                    task:'任务三',
                },
                {
                    id:4,
                    task:'任务四',
                },
            ]
        }
    }

    renderItem = () =>{{/*箭头函数返回这个结构*/}
        return (
            {/*{...item}其实是解构，item={item},绑定数据，自己用props接收*/}
            this.state.todos.map(item=><Item key = { item.id } {...item}/>)
        )
    }

    render () {
        return (
            <div>
                <ul>
                    {this.renderItem()}{/*执行函数*/}
                </ul>
            </div>
        )
    }

}

export default ListLoop

4、dangerouslySetInnerHTML(通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。

在显示时，利用dangerouslySetInnerHTML就可以正确解析效果)

import React, { Component } from 'react';

class Data extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            info:'<i>有斜体效果吗</i>'
        };
    }
    render() {
        return (
            <div>
                {/*要是单标签(双标签试验，也可以)，里面写属性，杠杠html后面接状态数据，就可以解析标签了*/}
                <div dangerouslySetInnerHTML={{__html:this.state.info}}/>
            </div>
        );
    }
}

export default Data;