reactjs - 如何设置子组件而不在父组件中渲染它？

Question

我的父组件检索一个列表并将其扩展为表格。
我希望行单击 cb (onRowClick) 用父组件 props/state 中的一些数据填充另一个组件。
我知道这可以使用 redux 来完成。是否有另一种方法可以简单地设置子组件而不渲染它，然后在单击 cb 上设置其 Prop ？

点击 cb 目前看起来像这样:

onRowClick={(event) => {
    return <ChildComponent data={props.data.data[event.index]} />
  }}

这不会调用 ChildComponent render 函数，因为组件未连接。

Answer 1

如果你不想使用 redux，你可以使用简单的 props 来传递一个设置状态的函数，并将状态数据传递给其他组件。

const App = () => {
  const [apiData, setApiData] = useState([]);
  useEffect(() => {
    // fetch api here
    setApiData();
  })
  const [data, setData] = useState();
  return (
    <>
    <Component1 tableData={apiData} onRowClick={setdata} />
    <ChildComponent data={data}/>
    </>
  );
}

如果两个组件在树中相距较远，那么您可以使用 react 上下文在它们之间传递数据。