共计 875 个字符，预计需要花费 3 分钟才能阅读完成。
1、render 函数 里面只能用一个标签
// 正确
render () {
return (<div>hello<div>)
}
// 错误
render () {
return (
<div>hello<div>
<div>world<div>
)
}
2、state 在组件在的定义、使用、以及改变
定义
// 在 constructor 函数中定义
constructor (props) {
super(props);
this.state = {
inputValue:””,
list:[]
}
}
使用
<input value = {this.state.inputValue} />
改变
<input value = {this.state.inputValue} onChange = {this.changeInput.bind(this)} />
// 方法一
changeInput(e){
this.setState({
inputValue:e.target.value
})
}
// 方法二
changeInput(e){
const value = e.target.value;// 需要保存变量，不能在下面直接用 e.target.value, 或者会报错
this.setState(()=>({
inputValue:value
}))
}
3、注释写法
{/* 注释 */}
// 或者
{
// 注释
}
4、css 中的 class 与 es6 的 class 冲突，改用 className 来代替
5、laber 标签和 input 做关联是所用的 for 要用 htmlFor 来代替
6、父组件传值给子组件
// 父组件通过属性的方式传给子组件
// 父组件
<todoList content = {item} />
// 子组件接受则用 props
// 子组件
<div>{this.props.content}</div>
7、子组件像父组件传参
// 父组件通过属性传父组件的方法给子组件（注意：必须 bind(this), 否则子组件 this 指向有问题）
// 父组件
<todoList delete = {this.delete.bind(this)} />
// 子组件接受
delete(){
this.props.delete();
}
