Lyrics

< More and better />

react组件之间传递信息

要理解组件直接的信息传递，必须了解以下知识，这样才能更好理解

state

  1. react Component 中 state 是属于自己组件私有的状态属性(可以修改）

设置state 

1
2
3
this.state= {
	content:''
}

修改state

1
2
3
this.setState({
	content:event.target.value
})

props

  1. props 是属于可以传递在组件之间的属性（不可修改），不是属于自己去设置的，是通过组件之间传递的

父组件传递给子组件

父组件传递方法

1
<MarkDown content ={this.state}/>

子组件接收方法

1
2
3
<div>
	{this.props.content}
</div>

子组件传递给父组件

自己的理解 :类似于 触发事件然后调用props 传递的函数，将所要传递的东西通过函数的参数传递

父组件接收的方法

1
2
3
4
5
6
7
8
9
<Edit  onChange={this.handleChange.bind(this)}/>
handleChange(value){
		this.setState({
			content:marked(value) 
		})
	}

子组件传递方法

1
2
3
4
5
6
7
8
9
10
11
12
13
<textarea name="Edits" id="Edits"  value={this.state.content} 	onChange={this.handleChange} />
	handleChange(event){
		this.setState({
			content:event.target.value
		})
		if(this.props.onChange){
			this.props.onChange(event.target.value)
			
		}
	}

这是最基础的数据在组件之间的传递，但是这也是最应该掌握的！

Fighting! END