如何在 ReactJS 中从另一个子组件触发子组件的更新？

javascript

2024-03-11 17:15:04

ReactJS 中从另一个子组件触发子组件的更新

在 ReactJS 的组件化架构中，实现组件之间的通信至关重要。想象一下，在一个父组件下，有两个子组件。我们需要在第一个子组件中执行某个操作，同时触发第二个子组件的更新。

挑战

传统上，使用 Context API 是一个流行的选择。Context API 允许组件在组件树中共享状态。然而，当第一个子组件更新共享状态时，它会导致第二个子组件重新渲染，即使我们只希望在特定的动作触发时更新。

自定义事件的妙用

为了解决这个问题，我们可以利用自定义事件。自定义事件允许组件之间通信，而无需直接访问共享状态。

步骤：

在父组件中定义一个事件处理函数。 该函数在第一个子组件执行操作时被触发，并且更新父组件中的状态。
在第一个子组件中使用该事件处理函数。 当用户执行操作时，组件调用父组件的事件处理函数。
在第二个子组件中使用 useEffect 钩子。 useEffect 钩子在状态变化时触发，并且在该组件中包含对自定义事件的监听。当父组件的状态更新时，该组件就会更新。

示例

// ParentComponent.js
import React, { useState } from 'react';

const ParentComponent = () => {
  const [isTriggered, setIsTriggered] = useState(false);

  const handleRefresh = () => {
    setIsTriggered(true);
  };

  return (
    <>
      <ChildComponent1 handleRefresh={handleRefresh} />
      <ChildComponent2 isTriggered={isTriggered} />
    </>
  );
};

// ChildComponent1.js
import React, { useState } from 'react';

const ChildComponent1 = (props) => {
  const handleClick = () => {
    props.handleRefresh();
  };

  return (
    <button onClick={handleClick}>Update ChildComponent2</button>
  );
};

// ChildComponent2.js
import React, { useEffect } from 'react';

const ChildComponent2 = (props) => {
  useEffect(() => {
    if (props.isTriggered) {
      // Perform the necessary update in ChildComponent2
    }
  }, [props.isTriggered]);

  return (
    <div>Data from ChildComponent1: {props.isTriggered}</div>
  );
};