组件通信
组件间是相互隔离的,若需要用到外部组件数据,就必须使用组件间通信来传输数据
-
组件通信方法
-
父组件-->子组件
-
父组件提供要传递的 state 数据
-
给子组件标签添加属性,值就是 state 数据
-
子组件使用 props 进行数据的接收
-
class Parent extends React.Component{
state = {
name : 'Jack'
}
render() {
return (
<div>
<App name={this.state.name}/>
</div>
)
}
}
// 子组件使用 props 接收数据
-
子组件--> 父组件
思路:父组件提供一个回调函数,子组件调用,将要传递的数据作为回调函数的参数传递到父组件
-
父组件提供回调函数
-
将回调函数作为属性值,传递给子组件
-
子组件通过 props 调用回调函数
-
将子组件要传递的数据作为参数传递给回调函数
-
// 父组件传递数据
class Parent extends React.Component{
state = {
message : ''
}
getChild = (msg) => {
this.setState({
message : msg
})
}
render() {
return (
<div>
<Child getMsg={this.getChild}/>
<h1>{this.state.message}</h1>
</div>
)
}
}
// 子组件使用 props 接收数据
class Child extends React.Component{
state = { name : 'Tom'}
handleClick = () => {
this.props.getMsg(this.state.name)
}
render() {
return (
<button onClick={this.handleClick}>点我传送数据</button>
)
}
}
-
兄弟组件之间
将数据传送到最近的公共父组件中,然后由公共父组件进行管理
需要通信的子组件使用 props 接收状态或操作状态
// 公共父组件 class Parent extends React.Component{ // 状态共享 state = { count : 0 } // 修改数据 onChange = () => { this.setState({ count : this.state.count + 1 }) } render() { return ( <div> <Child1 count = {this.state.count} /> <Child2 onChange = {this.onChange}/> </div> ) } } const Child1 = props => { return <h1>计数器:{props.count}</h1> } const Child2 = props => { return <button onClick={() => props.onChange()}>+1</button> } ReactDOM.render(<Parent />, document.getElementById('root'))
-
跨组件通信
-
调用 React.createContext() 创建 Provider (提供数据) 和 Consumer(消费数据) 两个组件
-
使用 Provider 组件作为父节点
-
在 Provider 组件中设置一个 value 属性,表示需要传输的数据
-
<Provider value="xxx">
...
</Provider>
-
调用 Consumer 组件接收数据
<Consumer> {data => <h1>{data}</h1>} </Consumer>