Question

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

click 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上下文在它们之间传递数据。

如何设置子组件而不在父组件中呈现它？

1 个答案: