组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能。接下来我们将从组件之间的关系来分解组件间如何传递数据。
1.父组件向子组件传递数据
通讯是单向的,数据必须是由一方传到另一方。在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。
class Parent extends Component{ state = { msg: ‘start‘ }; componentDidMount() { setTimeout(() => { this.setState({ msg: ‘end‘ }); }, 1000); } render() { return <Child_1 msg={this.state.msg} />; } } class Child_1 extends Component{ render() { return <p>{this.props.msg}</p> } }
如果父组件与子组件之间不止一个层级,如 Parent 与 Child_1_1 这样的关系(即Parent>Child_1>Child_1_1),可通过 ... 运算符
(Object 剩余和展开属性),将父组件的信息,以更简洁的方式传递给更深层级的子组件。通过这种方式,不用考虑性能的问题,通过 babel 转义后的 ... 运算符
性能和原生的一致,且上级组件 props 与 state 的改变,会导致组件本身及其子组件的生命周期改变。
// 向 Child_1_1 传递 Parent 组件的信息 class Child_1 extends Component{ render() { return <div> <p>{this.props.msg}</p> <Child_1_1 {...this.props}/> </div> } } class Child_1_1 extends Component{ render() { return <p>{this.props.msg}</p> } }
2.子组件向父组件传递数据
在上一个例子中,父组件可以通过传递 props 的方式,自顶而下向子组件进行通讯。而子组件向父组件传递数据,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。
// 父组件 Parent class Parent extends Component{ state = { msg: ‘start‘ }; transferMsg(msg) { this.setState({ msg }); } render() { return <div> <p>child msg: {this.state.msg}</p> <Child_1 transferMsg = {msg => this.transferMsg(msg)} /> </div>; } } // 子组件 Child_1 class Child_1 extends Component{ componentDidMount() { setTimeout(() => { this.props.transferMsg(‘end‘) }, 1000); } render() { return <div> <p>child_1 component</p> </div> } }
在上面的例子中,我们使用了 箭头函数
,将父组件的 transferMsg 函数通过 props 传递给子组件,得益于箭头函数,保证子组件在调用 transferMsg 函数时,其内部 this
仍指向父组件。
当然,对于层级比较深的子组件与父组件之间的通讯,仍可使用 ... 运算符
,将父组件的调用函数传递给子组件,具体方法和上面的例子类似。
原文地址:https://www.cnblogs.com/onebox/p/9599234.html
时间: 2024-10-07 12:13:17