Как задать динамическое значение props?

Question

[Николай Антонов]

Есть переменная dynamicData, которая меняется раз в 3 секунды. Как значение переменной задать в props или другим способом, чтоб компонент автоматически рендерился при изменении? Код jsfiddle.net/jv69s81h/4/

Answer 1

[Алексей Немиро]

Использовать state вместо props:

var Hello = React.createClass({
  getInitialState: function() {
    return { test: 0 };
  },
  componentWillMount: function() {
    setInterval(() => {
      var dynamicData = (Math.random() * 100).toFixed(0);
      this.setState({ test: dynamicData });
    }, 3000);  
  },
  render: function() {
    return <h2>{this.state.test}</h2>;
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Если нужны именно props, то родительский компонент может менять состояние и передавать его в нужное свойство дочернего компонента, а дочерний компонент может обрабатывать изменения в componentWillReceiveProps(nextProps).

Еще можно вызывать forceUpdate(), но лучше так не делать.

От идеи внешнего управления компонентами лучше сразу отказаться. Будет меньше проблем. Все должно быть внутри компонентов, либо вообще не относиться к компонентам.

Comments

[Николай Антонов]

Мне надо чтоб setInterval был не внутри, а снаружи компонента

[Алексей Немиро]

Николай Антонов: проще всего сделать компонент, в котором будет setInterval и который будет менять состояние.

Ну или делать так:

var dynamicData = 0;

setInterval(()=>{
  dynamicData = (Math.random() * 100).toFixed(0);
  ReactDOM.render(
    <Hello test={dynamicData} />,
    document.getElementById('container')
  );
}, 3000);

var Hello = React.createClass({
  render: function() {
    return <h2>{this.props.test}</h2>;
  }
});

ReactDOM.render(
  <Hello test={dynamicData} />,
  document.getElementById('container')
);

но это явно не лучшее решение :-)