Отправить реквизиты в состоянии - React

Question

Я пытаюсь понять, как отправить новую переменную, если я использую состояние.

Это пример из React урока:

var Timer = React.createClass({ 
    getInitialState: function() { 
    return {secondsElapsed: 0}; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return (
     <div>Seconds Elapsed: {this.state.secondsElapsed}</div> 
    ); 
    } 
}); 

React.render(<Timer />, mountNode); 

Он работает. Но если я хочу отправить secondsElapsed, что мне делать?

<Timer sec={this.props.sec}> и:

getInitialState: function() { 
    return {secondsElapsed: this.props.sec}; 
    } 

Это не работает.

JSFIDDLE - Я должен начать таймерную форму 10000 сек.

Answer 1

code ниже работает должным образом. Помимо того, что всегда есть значение по умолчанию для свойства initialTime, вы можете инициализировать состояние secondsElapsed в пределах getInitialState. Хотя это можно считать anti-pattern, в этом случае это не так, как это просто выполняется инициализация внутреннего состояния.

Кроме того, вам необходимо реализовать componentWillReceiveProps. Эта функция вызывается (после первого раза), когда реквизиты компонента были обновлены. В этом случае значение свойства initialTime было первоначально 10, а затем изменено на 10000. Итак, аргумент nextProps будет содержать объект с свойством initialTime, установленным на 10000.

var Timer = React.createClass({ 
    getInitialState: function() { 
    return { secondsElapsed: this.props.initialTime || 0 }; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentWillReceiveProps: function(nextProps) { 
     this.setState({ secondsElapsed: nextProps.initialTime || 0 }); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return (
     <div>Seconds Elapsed: {this.state.secondsElapsed}</div> 
    ); 
    } 
}); 

Если вы могли бы передача строки в initialTime, как показано выше, убедитесь, что вы используете parseInt на значение:

return { secondsElapsed: parseInt(this.props.initialTime || '0') }; 

Узнайте больше о жизненном цикле компонента here.

Answer 2

Заканчивать componentWillMount (http://facebook.github.io/react/docs/component-specs.html)

Это, если вы звоните в SetState componentWillMount вы гарантированно будет обновляться до его удара визуализации.