重新渲染子组件 React

Question

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

const ContributeBody = () => (
  <StyledContributeBody>
    <LastThreePages />
    <ContributeForm />
  </StyledContributeBody>
);

ContributeForm 组件收集数据并调用 API 函数将数据添加到我的动物群数据库集合中。

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

目前需要硬刷新页面才能更新LastThreePages。

我正在寻找一种在 ContributeForm 将数据提交到后重新加载 LastThreePages 的方法数据到 Fauna DB Collection。

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

这里的答案是通量模式吗？

Answer 1

据我所知，当组件的状态或属性发生变化时，React 会重新渲染组件。我想传递一些虚拟属性会起作用（我没有测试这个）：

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或将数据作为props传递，将数据传递给子组件.

当数据被读取和更改时，您可以触发其他数据的刷新，这将向下渗透到子组件。

重新渲染子组件 React

Re-render Child Compondents React

flux

reactjs

react-redux

next.js

faunadb