Как динамически установить данные в компонент снаружи внутрь?

javascript reactjs

61 просмотра

2 ответа

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

var dynamicData = 0;
setInterval(()=>{
    dynamicData = (Math.random() * 100).toFixed(0); // ???
}, 3000);

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

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

props 'test' не является динамическим - после изменения значение setTimeout в компонент не изменилось. Может быть, есть другой лучший способ сделать это? Как динамически добавлять данные в компонент, который изменился за пределами компонента?

Автор: Slava Источник Размещён: 08.11.2019 11:22

Ответы (2)


1 плюс

Решение

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

const dynamicData = new EventEmitter();
setInterval(()=>{
    let newValue = (Math.random() * 100).toFixed(0);
    dynamicData.emit('change', newValue)
}, 3000);

var Hello = React.createClass({
  getInitialState: () => ({test: 0}),
  handleChange: function(newValue) {
    this.setState({test: newValue})
  },
  componentDidMount: function() {
    this.props.test.on('change', this.handleChange)
  },
  componentWillUnmount: function() {
    this.props.test.removeListener('change', this.handleChange)
  },
  render: function() {
    return <h2>{this.state.test}</h2>;
  }
});

ReactDOM.render(
  <Hello test={dynamicData} />,
  document.getElementById('container')
);
<script src="https://npmcdn.com/wolfy87-eventemitter@5.1.0/EventEmitter.min.js"></script>
<div id="container">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Автор: DarkKnight Размещён: 20.08.2016 02:35

3 плюса

Вы должны вызвать ReactDOM.renderметод снова внутри setIntervalобратного вызова. Это выглядит неэффективно, но React достаточно умен, чтобы повторно использовать смонтированный компонент и обновлять его новыми реквизитами.

Из документации React API :

Если ReactElement ранее отображался в контейнере, он будет обновлять его и изменять только DOM по мере необходимости, чтобы отразить последний компонент React.

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

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

ReactDOM.render(
  <Hello test={dynamicData} />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"/>

Автор: Manolo Santos Размещён: 20.08.2016 02:12
Вопросы из категории :
32x32