如何在已安装的ReactJS组件中自动传递更新的道具

Question

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

在下面的代码中，CustomfieldsDrawer是一个反应组件，props是我作为道具传递的对象。 $（'＃app'）是我的React组件将挂载的附加点。

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

现在道具对象是通过ajax调用对某些客户事件进行actaually更新的对象，我面临的问题是React组件不知道道具何时被更改并且它不会自动重新呈现。 每当道具实际改变时，我不得不再次调用上面的代码行。 你们知道一种方法可以促进我的React组件的自动更新吗？

Answer 1

由于props是一个普通的javascript对象，它在React之外进行了修改，因此除非你明确地告诉它，否则React不会知道它已被更改，在这种情况下通过重新渲染组件。

所以，你可以换行代码到一些家长反应成分，并从中调用AJAX，然后改变它的状态含有会得到传递给子组件和将触发自动重新绘制新的数据。

或者 ，如果您坚持在React之外使用代码，则必须手动重新渲染。 但是，您可以为此创建一些方便的管理代码，以获取灵感，查看ReactDOM.render和官方React网站上的顶级React API博客文章。

另外在旁注，我不确定你发布的代码是如何工作的。 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函数或更多代码，以便我能更好地了解你的情况，然后我们可以一起修复它，谢谢