Question

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

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

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

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

Answer 1

由于props是在React之外修改的普通javascript对象，因此React并不知道它已被更改，除非您明确告知它，在这种情况下通过重新呈现零件。

所以你可以将代码包装到一些父反应组件中并从中调用ajax然后更改它的状态以包含将传递给子组件的新数据这将触发自动重新渲染。

或，如果您坚持让代码在React之外，则必须手动重新渲染。但是，您可以为此创建一些方便的管理代码，以便在官方React网站上查看ReactDOM.render and the Top Level React API博客文章。

另外在旁注，我不确定您发布的代码是如何工作的。 ReactDOM.render函数需要第二个参数是DOM对象，但$('#app')返回jQuery对象。你的意思是让$('#app')[0]代替吗？

Answer 2

当我们setState时，React组件会自动更新，因此在ajax回调中，我们可以在此处设置setState，或者我认为您可以使用componentWillReceiveProps()作为CustomfieldsDrawer组件：

  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函数或更多代码，以便我能更多地了解你的情况，然后我们可以将它们一起解决，谢谢

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

2 个答案: