Reactjs 当道具更改时更新react根组件

我有一个react/redux应用程序，作为第三方小部件嵌入到其他网页上

应用程序从其嵌入的页面上的窗口对象接收配置对象。 示例配置对象可以是：

window.appConfig = {
    color: 'blue'
}

我希望能够在配置对象的属性更改时更新应用程序

我无法控制父页面何时/是否更改配置对象，在某些情况下，对配置对象的更新在页面加载后异步进行

当道具更新时，是否有办法让根组件的

componentdiddupdate（）

启动，或者如何监听更新的道具

index.js文件如下所示：

ReactDOM.render(
    <Provider store={store}>
      <App config={window.appConfig} />
    </Provider>,
    window.document.getElementById("root")
)

class App extends React.Component {

    // This is not called when config object change
    componentDidUpdate(prevProps) {
        console.log(this.props)
    }

  render() {
    return <pre>{JSON.stringify(this.props, null, 2)}</pre>
  }
}

...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

ReactDOM.render(
,
window.document.getElementById（“根”）
)

app.js文件如下所示：

ReactDOM.render(
    <Provider store={store}>
      <App config={window.appConfig} />
    </Provider>,
    window.document.getElementById("root")
)

class App extends React.Component {

    // This is not called when config object change
    componentDidUpdate(prevProps) {
        console.log(this.props)
    }

  render() {
    return <pre>{JSON.stringify(this.props, null, 2)}</pre>
  }
}

...

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

类应用程序扩展了React.Component{
//当配置对象更改时，不会调用此函数
componentDidUpdate（prevProps）{
console.log（this.props）
}
render（）{
返回{JSON.stringify（this.props，null，2）}
}
}
...
导出默认连接(
MapStateTops，
mapDispatchToProps
)（应用程序）

---

（检测更改的一种常见方法是设置一个间隔并检查config对象是否有更改，但我希望避免这种情况）

相反，将

config

值放在sore上，并

将组件与
redux
存储连接，并
在配置更新时分派存储中的更改，该组件将正常工作

//config.js
从“../path/to/store”导入存储
const updateConfig=（配置）=>{
仓库调度({
键入：“APP\u CONFIG\u UPDATE”//添加一个减速机来捕获并更新它
有效载荷：配置
})
}
//更改时使用'updateConfig'

在应用程序上，只需从redux状态解构配置

注:
您可以使用功能组件而不是类，它将在道具更改时进行更新，而无需类生命周期

或：

const updateConfig=（配置）=>{
仓库调度({
键入：“APP\u CONFIG\u UPDATE”//添加一个减速机来捕获并更新它
有效载荷：配置
})
}
设置间隔（（）=>{
const{getState}=store
cosnt{config}=getState（）
if（比较对象（window.appConfig，config））
updateConfig（window.appConfig）
}，1000*60/*每分钟*）
//用于简单对象比较
函数compareObject=（obj1，obj2）=>JSON.stringify（obj1）==JSON.stringify（obj2）
你能提供一个基本的例子来说明吗？当然可以，但是你能告诉我你是如何更新配置的吗？其中负责该应用程序嵌入的“第一方站点”控制配置对象的部分在哪里。例如，模拟更新的一种简单方法是从devtools中更新window.config，如：
window.config.color=“red”
噢，您必须创建一个可观察的模式才能完成这样的操作（提示：使用setter和getter）。我已经更新了问题，以使情况更加清楚。我被setInterval黑客困住了，所以对所有的想法都敞开心扉。。。