组件间的常见通信方式

React组件之间常常会需要相互间进行通信，根据其特征的不同，一般分为如下三种：

子组件通知父组件

这是最常见的方式，直接用 this.props.xxx() 事件即可。在父组件中捕获来自子组件的事件：

<ChildPart onChange={() => console.log('from child')}/>

子组件中的定义如下：

class ChildPart extends React.Component {
    render() {
        return (
            <button onClick={() => this.props.onChange()}>
                　　　　   Hello {this.props.name}
           　　　　  </button>
        );
    }
}

在ChildPart组件中，当点击button时，触发onClick事件，引发this.props.onChange()执行，从而触发事件到父组件中，最终打印from child字符串。

父组件通知子组件

父组件可以使用props来给子组件传值，但是props并不能直接触发子组件的事件。所以，需要通过ref绑定子组件后，才可以直接访问子组件中的方法和属性。父组件的定义如下：

class Father extends React.Component {
    render() {
        return (
            <div>
                　　　　  <ChlildPart ref={node => this.childPart = node} />
                　　　　  <button onClick={() => this.childPart.handleClick('father clicked button')}>Button</button>
           　　　　 </div>
        );
    }
}

定义了一个父类组件Father，并用ref将this.childPart指向子组件ChildPart的DOM节点，当点击父类中的button时，触发onClick事件，接着执行this.childPart.handleClick('father clicked button')，引发子组件中定义的handleClick方法执行。

子组件ChildPart的定义如下：

class ChlildPart extends React.Component {
    handleClick = value => {
        console.log('msg from father: ', value)
    }

    render() {
        return (
            <h2>child part</h2>
        );
    }
}

没有嵌套关系的组件之间通信

可以使用events模块的 EventEmitter类，来构建一个公共的event bus来进行管理。

我来回复

暂无回复内容

组件间的常见通信方式

回复

相关问题