Свойства совместного использования между компонентами React

Question

Я создаю часы вроде React, которые имеют возможность увеличивать или уменьшать число (по умолчанию 25) в одном компоненте, а в другом компоненте он обновляет таймер (с 25:00 до мы начинаем с 25) до того, какое число увеличивается или уменьшается до.

У меня есть два компонента (сеанс и часы), которые успешно выполняют свои собственные действия, однако я в тупике о том, как я могу получить счетчик (компонент Session) для обновления состояния таймера в компоненте Clock. В частности, я играл с this.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 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; 

Answer 1

Вам необходимо пройти в состоянии от сессии до часов, как так:

<Clock time={this.state.minutes} /> в компоненте Session

Тогда «состояние» теперь доступно для вашего часового компонента как this.props.time

или как вы его называете в приведенном выше кодексе.

Мораль этой истории в том, что состояние передается в от родительского компонента к компоненту ребенка делается это с помощью реквизита

Соответствующие Docs:

https://facebook.github.io/react/docs/multiple-components.html

Редактировать: еще один ключевой ссылку в Документы:

https://facebook.github.io/react/tips/communicate-between-components.html