如何在挂载的ReactJS组件中自动传递更新的道具

Question

我有一个场景，在我的ReactJS组件中，安装在jQuery附加点上，如下所示。

在下面的代码中，CustomfieldsDrawer是一个反应性组件，而道具是我作为道具传递的对象。$('#app')是我的反应性组件将挂载的附加点。

ReactDOM.render(React.createElement(CustomfieldsDrawer, props), $('#app'));

现在，props对象是通过ajax调用对某些客户事件进行自动更新的对象，我面临的问题是React组件不知道什么时候道具被更改，并且它不会自动更改本身。每当道具实际发生变化时，我不得不再次调用上面的代码。你们知道有什么方法可以促进我的反应组件的自动更新吗？

Answer 1

因为props是一个普通的javascript对象，它是在React之外修改的，所以React不知道它被更改了，除非您显式地告诉它，在本例中是通过重新呈现组件。

因此，您可以，或者将代码包装到某个父反应组件中，然后从它调用ajax，然后更改它的状态，以包含将传递给子组件并触发自动重呈现的新数据。

或，如果您坚持要将代码放在React之外，则必须手动重新呈现。但是，您可以为此创建一些方便的管理代码，以获得灵感，查看官方React网站上的ReactDOM.render和顶层React博客文章。

另外，我不知道你发布的代码是如何工作的。ReactDOM.render函数期望第二个参数是DOM对象，但是$('#app')返回jQuery对象。你是想让$('#app')[0]去吗？

Answer 2

当我们对其进行setState时，React组件将更新自身，因此无论是在ajax回调中，还是在这里我们都可以使用setState，或者我认为您可以为您的CustomfieldsDrawer组件使用componentWillReceiveProps()：

  componentWillReceiveProps(nextProps) {
    this.setState({
      //set you new state here, then in the render method, you should render using this state, instead of props
      someState: nextProps.yourNewProp,
    });
  }

  render() {
    // Use "{this.state.someState}" instead of "{this.props.yourProp}"
    return (
      <div>{this.state.someState}</div>
    );
  }

如果这还不能用，请在这里张贴您的ajax函数或更多代码，以便我能够更多地了解您的情况，然后我们可以一起修复它，谢谢。