javascript - 如何在已安装的 ReactJS 组件中自动传递更新的 Prop

标签 javascript jquery reactjs

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

在下面的代码中,CustomfieldsDrawer 是一个 React 组件,props 是我作为 Prop 传递的对象。 $('#app') 是我的 React 组件将挂载的附加点。

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

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

最佳答案

因为 props 是一个在 React 之外修改的普通 javascript 对象,React 不知道它被改变了,除非你明确地告诉它,在这种情况下重新渲染组件。

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

或者,如果您坚持将代码放在 React 之外,您将不得不手动重新渲染。但是,您可以为此创建一些方便的管理代码,以获取灵感,请查看 ReactDOM.render and the Top Level React API React 官方网站上的博文。

另请注意,我不确定您发布的代码如何工作。 ReactDOM.render 函数期望第二个参数是 DOM 对象,但是 $('#app') 返回 jQuery 对象。你是不是想用 $('#app')[0] 代替?

关于javascript - 如何在已安装的 ReactJS 组件中自动传递更新的 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43975566/

相关文章:

javascript - 使用 mongoose 返回特定用户的所有评论,而无需其他文档字段

javascript - 如何在 5 分钟不活动后更改页面位置

javascript - 将背景更改为静态以打开 Bootstrap 模式

类中的 JavaScript/jQuery 变量作用域 (this)

reactjs - 在一行中获取按钮和输入字段

javascript - react native : undefined is not a function (evaluating 'this.props.passwordChanged(text)' )

javascript - 如何在使用数据表发送到模板之前获得 AJAX 响应?

javascript - 为 bodyParser 发出带有 JSON 的问题

twitter-bootstrap - 在react-bootstrap中处理点击 `ButtonGroup`

javascript - 状态更改时 React 组件不会重新渲染