reactjs - 更新 react 组件而无需其外部的父组件

Question

如果组件没有父组件，我应该如何正确更新组件？

我找到了两种方法:

First method

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

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

Second method

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

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

那么哪种方法是正确的呢？或者也许这是第三种正确方法？

Answer 1

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

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

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

component.forceUpdate()