React作为前端工程化的三大框架之一,有其独有的特点和优势,组件之前的通讯是必不可少的内容,废话不多说,接下来就对这个做个总结(有不足之处欢迎留言评论)。
父组件传递数据给子组件
- 父组件提供要传递的数据
- 给子组件标签添加属性,值为 state 中的数据
- 子组件中通过 props 接收父组件中要传递的数据
class Parent extends React.Component {
state = {
lastName: '王'
}
render() {
return (
<div className="parent">
父组件:
<Child name={this.state.lastName} />
</div>
)
}
}
const Child = (props) => {
return (
<div className="child">
<p>子组件,接收到父组件的数据:{props.name}</p>
</div>
)
}
子组件给父组件传递的数据
- 父组件提供一个回调函数 (用于接收数据)
- 将该函数作为属性的值,传递给子组件
- 子组件通过 props 调用回调函数
- 将子组件的数据作为参数传递给回调函数
<!-- 父组件 -->
class Parent extends React.Component {
state = {
parentMsg: ''
}
getChildMsg = data => {
console.log('接收到的子组件数据:'+data)
this.setState({
parentMsg:data
})
}
render() {
return (
<div className="parent">
父组件:{this.state.parentMsg}
<Child getMsg={this.getChildMsg} />
</div>
)
}
}
<!-- 子组件 -->
class Child extends React.Component {
state = {
msg:"刷抖音"
}
handleClick = () => {
this.props.getMsg(this.state.msg)
}
render(){
return (
<div className="child">
子组件:<button onClick={this.handleClick}>点我,给父组件传递数据</button>
</div>
)
}
}
兄弟组件传值
-
将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
-
思想是:
状态提升
-
公共父组件职责:提供共享状态,提供操作共享状态的方法
class Parent extends React.Component {
state = {
count: 0
}
onIncrement = () => {
this.setState({
count:this.state.count + 1
})
}
render() {
return (
<div className="parent">
<Child1 count={this.state.count}></Child1>
<Child2 onIncrement={this.onIncrement}></Child2>
</div>
)
}
}
class Child1 extends React.Component {
render(){
return <h1>计数器:{this.props.count}</h1>
}
}
class Child2 extends React.Component {
render() {
return <button onClick={this.props.onIncrement}>+1</button>
}
}
Context
- 作用:跨组件传递数据(解决了多级组件嵌套过深之间的传值)
- 调用 React.createContext() 创建 Provider (提供数据) 和 Consumer (消费数据) 两个组件
- 使用 Provider 组件作为父节点
- 设置 value 属性,表示要传递的数据
- 调用 Consumer 组件接收数据
const { Provider, Consumer } = React.createContext()
class App extends React.Component {
render() {
return (
<Provider value="pink">
<div className="app">
<Node></Node>
</div>
</Provider>
)
}
}
const Node = props => {
return (
<div className="node">
<SubNode></SubNode>
</div>
)
}
const SubNode = props => {
return (
<div className="subnode">
<Child></Child>
</div>
)
}
const Child = props => {
return <div className="child">
<Consumer>
{
data => <span>我是子节点 -- {data}</span>
}
</Consumer>
</div>
}
- 总结:
- 如果两个组件是多级嵌套关系,可以使用 Context 实现组件通讯
- Context 提供两个组件:Provider (提供数据) 和 Consumer (消费数据)