组件间的常见通信方式

冒牌SEO React 283

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,并用refthis.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来进行管理。

  • 暂无回复内容