React如何触发兄弟组件的功能？

Question

我是前端世界的新手，不知道如何从同级组件触发功能。假设我在 App.js 中有 2 个组件。该页面是：

function App() {
  return (
    <div className="App">
      <h1>Customer List</h1>
      <MainPanel/>
      <TableFooterPanel/>
    </div>
  );
}

主面板代码是：

function MainPanel() {

  const [customers, setCustomers] = useState([]);
  
  useEffect(() => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers(response.data);
      console.log(response.data)
    };
    fetchPostList()
  }, []);

  const deleteCustomer = (id) => {
    service.deleteCustomerById(id);
  }

  return (
    <ReactBootStrap.Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {customers &&
            customers.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.firstName}</td>
                <td>{item.lastName}</td>
                <td><Button onClick={() => deleteCustomer(item.id)} ><FontAwesomeIcon icon={faTrashRestore} /></Button></td>
              </tr>   
            ))}
        </tbody>
      </ReactBootStrap.Table>
  );
}

export default MainPanel;

而 TableFooterPanel 代码为：

function TableFooterPanel() {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const addNewCustomer = (name, surname) => {
        service.addCustomer(name, surname);

    }

    return (

        <>
            <Card className='buttonFooter'>
                <Form className='buttonFooter'>
                    <input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input>
                    <Button onClick={() => addNewCustomer(firstName, lastName)}>Add</Button>
                </Form>
            </Card>
        </>
    );
}
export default TableFooterPanel;

我想做的是，每当我点击按钮并将客户信息发送到后端进行保存，然后立即调用 MainPanel 中的一个函数来设置它的 table 数据并立即更新 table添加后。比如，我想单击按钮并添加它，如果响应成功，则刷新 table（不刷新整个页面）。

最好的方法是什么？

Answer 1

在 React 中我们有一个数据流。从parent到children，还有一些信息没办法传递，从children到parent/sibling。你要的叫Lifting State Up

只需将必要的逻辑放在parent组件中，这里就是App组件。在 App 组件中，你将有一个触发 table 数据加载的函数，当数据加载时你应该保存它，也在 App 组件中。您将 table 数据作为道具传递给 MainPanel。然后将 App 组件（触发 table 数据加载）的那个函数传递给您的 TableFooterPanel 组件，并在 onClick 事件发生时调用它。

Answer 2

我会引入一个组件来保存 table 和页脚，并将状态放在这个组件中。然后将一个函数作为 prop 向下传递给页脚组件，这将更新 table 数据。然后将 table 数据作为 props 传递给 table 组件。

function Customers({initialData = []}) {
  const [customers, setCustomers] = useState(initialData);

  return (
    <div>
      <h1>Customers</h1>
      <CustomerTable customers={customers} />
      <TableFooter addCustomer={(customer) => setCustomers([...customers, customer])} />
    </div>
  )
}

通过将 initialData 设置为默认为空数组，您可以依赖 table 组件中的 .map 等数组方法。

React如何触发兄弟组件的功能？

How to trigger a function of sibling component in React?

javascript

typescript

reactjs

react-context

react-hooks