Javascript 在组件之间共享属性

我正在用React构建一种时钟，它可以在一个组件中增加或减少一个数字（默认值为25），在另一个组件中，它会将计时器（25:00，因为我们从25开始）更新为任何数字的增加或减少

我有两个组件（会话和时钟）成功地执行了它们自己的操作，但是如何让计数器（会话组件）更新时钟组件中计时器的状态，我感到困惑。更具体地说，我一直在玩弄

这个.props.minutes

，但毫无用处

问题：如何在组件之间共享

this.state.minutes

属性？先谢谢你。我对React还是个十足的初学者

会议：

const Session = React.createClass({

  getInitialState: function() {
    return {
      minutes: 25,
      seconds: 0
    };
  },

  increment: function() {
    this.setState({ minutes: this.state.minutes + 1 });
  },

  decrement: function() {
    this.setState({ minutes: this.state.minutes - 1 });
  },

  timeToString: function(time) {
    return time + ':00';
  },

  render: function() {
    return (
      <section>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        {this.state.minutes}
        <Clock/>
      </section>
    );
  }

});

module.exports = Session;

const Session=React.createClass({
getInitialState:函数（）{
返回{
会议记录：25，
秒：0
};
},
增量：函数（）{
this.setState（{minutes:this.state.minutes+1}）；
},
减量：函数（）{
this.setState（{minutes:this.state.minutes-1}）；
},
timeToString:函数（时间）{
返回时间+'：00'；
},
render:function（）{
返回(
+
-
{this.state.minutes}
);
}
});
module.exports=会话；

时钟：

const Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  startTimer: function() {
    var intervalId = setInterval(this.timer, 1000);
    this.setState({ intervalId: intervalId });
  },

  pauseTimer: function() {
    clearInterval(this.state.intervalId);
    this.setState({ intervalId: this.state.currentCount });
  },

  timer: function() {
    var newCount = this.state.currentCount - 1;
    if (newCount >= 0) {
      this.setState({ currentCount: newCount });
    } else {
      clearInterval(this.state.intervalId);
    }
  },

  render: function() {
    return (
      <section>
        <button onClick={this.startTimer}>Start</button>
        <button onClick={this.pauseTimer}>Pause</button>
        {this.state.currentCount}
      </section>
    );
  }

});

module.exports = Clock;

const Clock=React.createClass({
getInitialState:函数（）{
返回{currentCount:10}；
},
startTimer:function（）{
var intervalId=setInterval（this.timer，1000）；
this.setState（{intervalId:intervalId}）；
},
pauseTimer:function（）{
clearInterval（this.state.intervalId）；
this.setState（{intervalId:this.state.currentCount}）；
},
计时器：函数（）{
var newCount=this.state.currentCount-1；
如果（newCount>=0）{
this.setState（{currentCount:newCount}）；
}否则{
clearInterval（this.state.intervalId）；
}
},
render:function（）{
返回(
开始
暂停
{this.state.currentCount}
);
}
});
module.exports=时钟；

您需要将状态从会话传递到时钟，如下所示：

会话组件中的

然后“状态”现在可以作为

this.props.time

或者你在上面的代码中叫它什么

这个故事的寓意是，使用道具将状态从父组件传递到子组件

相关文件：

编辑：文档中的另一个关键链接：

---

对于亲子沟通，只需传递道具即可。非常感谢。我不敢相信我没有意识到。同样的事情发生在我身上！，我相信这是一个常见的错误