Question

我需要从组件中动态设置数据，如下所示：

edittext.getText().toString().length() == 0

props'test'不是动态的 - 在将setTimeout值更改为组件后没有改变。也许它有其他最好的方法来做到这一点？如何将动态数据添加到组件中，组件外部发生了变化？

Answer 1

您应该在ReactDOM.render回调中再次调用setInterval方法。它看起来效率低下，但React足够聪明，可以重用已安装的组件并使用新的道具进行更新。

来自React API documentation：

如果ReactElement之前已经渲染到容器中，那么它将对其执行更新，并且只在必要时改变DOM以反映最新的React组件。

＆＃13;

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')
);

＆＃13;

<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"/>

＆＃13;

Answer 2

您可以使用全局事件发射器，并通过props传递，组件侦听更改并更新其状态。

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

如何将数据动态设置为从外到内的组件？

2 个答案: