子组件如何从接收到的道具中找到父组件是否完成了对dom的修改

Question

我正在从事图书馆项目。我的根组件正在监听redux存储。在我的首次页面访问中，该商店未加载。因此一开始它没有显示书籍。大约1秒钟后（在books API调用完成之后），它将图书加载到redux存储，该存储使用获取的图书更新根容器的Dom。

我有一个menuBar组件，它充当根组件的子组件。正在获取由根对象创建的dom节点[我使用document.getElementByID（'ID'）]。我在子组件componentDidMount（）函数中执行此操作。问题是根组件重新渲染后，子组件不会重新渲染。

所以菜单栏保持为空。

我使用redux-persist。如果刷新页面，则会显示菜单栏，因为redux-persist从初始API提取中向redux存储提供值。

有没有一种方法可以检测根组件是否在进行dom修改，如果有，可以强制从根组件中更新子组件。

如果需要更多信息，请发表评论。

Answer 1

您需要将数据传递给子组件，而不是使用ID查找。

const Parent = (store) => {
    
  const dataFromRedux = store.parentData
  // get your data some how

  return (
  <div>
    <Child data={dataFromRedux} />
  <div>
  )
}

const Child = ({ data }) => {
  // child will now re-render when the data is updated
  return <div>{data}</div>
}