Question

我有一个父组件：Previewer，它会呈现两个孩子。

class Previewer extends Component {
  render() {
    return (
      <AudioPlayer />
      <SubtitleRow />
    );
  }
}

当用户点击SubtitleRow时，它应该传递变量，例如startTime和EndTime，AudioPlayer，应播放音频。

我已阅读official documentation：

用于两个没有组件的组件之间的通信亲子关系，您可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅 componentWillUnmount（），并在收到事件时调用setState（）。 Flux模式是安排这种方式的可能方式之一。

我认为他们有关系（兄弟姐妹），那么，还有什么方法可以实现他们的沟通吗？

根据JavaScript Good Parts或JavaScript设计模式，不建议使用全局事件或变量。

Answer 1

您可以使用状态将变量传递给AudioPlayer组件。然后在你的SubtitleRow组件中你可以调用函数this.props.onClick（startTime，endTime）

class Previewer extends Component {
 constructor() {
     this.state = { 'startTime': 0, 'endTime' : 0 };
     this.handleClick= this.handleClick.bind(this);
 }

 handleClick(startTime, endTime) {
   this.setState({
     'startTime': startTime,
     'endTime': endTime
   });
 }

  render() {
    return (
      <AudioPlayer startTime="{this.state.startTime}" endTime="{this.state.endTime}"/>
      <SubtitleRow onClick="{this.handleClick}" />
    );
  }
}

React.js：同一父母的两个孩子之间的交流？

1 个答案: