如何在兄弟组件中触发函数而不使用contextAPI或Redux?

Question

如何在不使用Redux、contextAPI等的情况下从form-component中触发table-component中的函数

父:

...
<Form />
<Table />

表组件:

function TableComponent() {
..
...
const updateTable = () => {
//do some state here
//should be triggered by sibling component/form component
}

}

表单组件:

function FormComponent() {
..
...
const submitForm = () => {
...
*trigger the updateTable() from table component here*
}
}

Answer 1

这里的解决方案是"提升状态"，或者将状态移动到公共父组件。在您的示例中，它可能类似于将表单状态和提交表单函数向上移动到父组件，然后将始终最新的表数据向下传递到table组件:

function Parent() {
const [formState, setFormState] = React.useState(/*...*/);
const [tableState, setTableState] = React.useState(/*...*/);
const submitForm = (data) => {
/* ... */
// update the table data here
}
return (
<Form handleSubmit={submitForm} />
<Table data={tableData} />
);
}

这样，你的Table组件只关心显示你通过props传递给它的数据，而Parent组件负责管理从表单接收到的状态。

Answer 2

要实现这一点，您必须在父组件处拥有一个状态并将其传递给table-component。你还可以从父组件传递函数给form-component来更新状态。在表组件中，您可以将此传递状态作为调用所需函数(updateTable)的依赖数组中的依赖项。

的例子:父组件:

const ParentComponent = () => {
const [loadTableData, setLoadTableData] = useState(false);
return (
<>
<TableComponent loadTableData={loadTableData} />
<FormComponent setLoadTableState={setLoadTableData} />
</>
)
}

TableComponent:

const TableComponent = ({loadTableData}) => {
useEffect(() => {
if(loadTableData){
updateTable();
}
}, [loadTableData]);
//other body
}

FormComponent:

const FormCompondent = ({setLoadTableData}) => {
const loadTableData = () => {
setLoadTableData(true)
}
// other body
}