Question

如果其中一个子项更新，是否可以重新渲染一个或两个子项？我有一个看起来像这样的组件：

-c

const ContributeBody = () => ( <StyledContributeBody> <LastThreePages /> <ContributeForm /> </StyledContributeBody> );组件收集数据并调用API函数，该函数将数据添加到我的Fauna数据库集合中。

ContributeForm组件调用一个API函数，该函数从Fauna数据库集合中获取最后三页。

目前，必须重新加载页面以更新LastThreePages。

我正在寻找一种方法，在LastThreePages将数据提交到数据保存到动物数据库集合。

当前，我没有使用Redux或GraphQL。我正在使用FQL。

这是通量模式的答案吗？

Answer 1

据我所知，当组件的状态或属性更改时，它会重新渲染组件。我猜想传递一些虚拟属性会起作用（我没有对此进行测试）：

const ContributeBody = () => (
  const [rev, setRev] = useState((new Date()).valueOf());

  <StyledContributeBody>
    <LastThreePages rev={rev} />
    <ContributeForm onSuccess={() => {setRev((new Date()).valueOf());}} />
  </StyledContributeBody>
);

需要重新渲染时致电onSuccess

Answer 2

我的建议是StyledContributeBody（或更高版本）管理数据的读取和提交，然后通过React Context（推荐）或Redux或将数据作为道具传递，将数据传递给子组件。 / p>

在读取和更改数据时，您可以触发其他数据的刷新，这将滴入子组件中。

重新渲染儿童部件反应

2 个答案: