更新反应组件而没有父组件在其之外

2024-02-28

如果组件没有父组件,我应该如何正确更新组件?

我找到了两种方法来做到这一点:

第一种方法 https://jsfiddle.net/69z2wepo/28597/

这里我通过改变组件的状态来更新组件:

var Hello = React.createClass({
  render: function() {
    if (!this.state) return null;
    return (
      <div>Hello {this.state.name}</div>
    );
  }
});


var component = ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);
component.setState({name: "World"});

setTimeout(function(){
  component.setState({name: "StackOverFlow"});
}, 1000);

第二种方法 https://jsfiddle.net/69z2wepo/28596/

这里我通过更新组件ReactDOM.render method:

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


ReactDOM.render(
  <Hello name="world"/>,
    document.getElementById('container')
);

setTimeout(function(){
  ReactDOM.render(
    <Hello name="StackOverFlow"/>,
      document.getElementById('container')
  );

}, 1000);

那么哪种方法是正确的呢?或者也许这是第三个,correct way?


如果您只是想从组件外部触发重新渲染,则公开其forceUpdate方法。

初始的 ReactDOM.render 返回对组件的引用,您可以使用它:

const component = ReactDOM.render(<MyComponent />)

component.forceUpdate()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更新反应组件而没有父组件在其之外 的相关文章

随机推荐