React JS：如何向组件树下层传递事件？点击Button触发Item方法

Hey there! Let's work through how to trigger that method in your <Item /> component when clicking the <Button />—since they're sibling components under <App> (with <Container> wrapping <Item />), here are two reliable approaches that fit React's patterns:

Approach 1: Use React Refs (Direct Component Instance Access) #

This is straightforward if you need a quick, direct way to call the method. You'll create a ref in <App>, pass it down to <Item />, then use that ref to invoke the method when the button is clicked.

Step-by-Step Code Example: #

First, set up the ref in your <App> component:

import { useRef } from 'react';
import Container from './Container';
import Button from './Button';

function App() {
  // Create a ref to hold the Item component instance
  const itemRef = useRef(null);

  // Handler for Button click: call the method in Item
  const handleButtonClick = () => {
    if (itemRef.current) {
      // Replace `yourItemMethod` with the actual method name in Item
      itemRef.current.yourItemMethod();
    }
  };

  return (
    <div className="App">
      {/* Pass the ref down through Container to Item */}
      <Container itemRef={itemRef} />
      <Button onClick={handleButtonClick} />
    </div>
  );
}

Then, in your <Container> component, pass the ref down to <Item />:

import Item from './Item';

function Container({ itemRef }) {
  return (
    <div className="Container">
      {/* Attach the ref to the Item component */}
      <Item ref={itemRef} />
    </div>
  );
}

Finally, make sure your <Item /> component exposes the method (for functional components, use forwardRef and useImperativeHandle):

import { forwardRef, useImperativeHandle } from 'react';

// Wrap Item with forwardRef to access the ref from parent
const Item = forwardRef((props, ref) => {
  // The method you want to call from outside
  const yourItemMethod = () => {
    console.log("Item method triggered!");
    // Add your logic here
  };

  // Expose the method to the parent via the ref
  useImperativeHandle(ref, () => ({
    yourItemMethod
  }));

  return <div className="Item">Your Item Content</div>;
});

export default Item;

Note: Refs work great for simple use cases, but try not to overuse them—they bypass React's declarative flow. Stick to this when you need direct component access.

Approach 2: State-Driven Trigger (React's Declarative Way) #

This aligns better with React's unidirectional data flow. Instead of calling a method directly, you'll use a state in <App> to signal <Item /> to run its method.

Step-by-Step Code Example: #

In <App>, create a state variable to track when to trigger the method:

import { useState } from 'react';
import Container from './Container';
import Button from './Button';

function App() {
  const [shouldTriggerItemMethod, setShouldTriggerItemMethod] = useState(false);

  const handleButtonClick = () => {
    // Toggle the state to trigger the effect in Item
    setShouldTriggerItemMethod(prev => !prev);
  };

  return (
    <div className="App">
      {/* Pass the state down to Item via Container */}
      <Container shouldTriggerItemMethod={shouldTriggerItemMethod} />
      <Button onClick={handleButtonClick} />
    </div>
  );
}

Pass the state through <Container> to <Item />:

import Item from './Item';

function Container({ shouldTriggerItemMethod }) {
  return (
    <div className="Container">
      <Item shouldTriggerItemMethod={shouldTriggerItemMethod} />
    </div>
  );
}

In <Item />, use useEffect to listen for state changes and run your method:

import { useEffect } from 'react';

function Item({ shouldTriggerItemMethod }) {
  const yourItemMethod = () => {
    console.log("Item method triggered via state!");
    // Add your logic here
  };

  // Run the method whenever shouldTriggerItemMethod changes
  useEffect(() => {
    if (shouldTriggerItemMethod) {
      yourItemMethod();
    }
  }, [shouldTriggerItemMethod]);

  return <div className="Item">Your Item Content</div>;
}

export default Item;

Why this is better: It follows React's declarative model—you're describing what should happen (trigger the method) rather than how to do it (calling a method directly). This is easier to debug and maintain, especially as your app grows.

Which One Should You Use? #

• Use refs if you have a simple, one-off need and don't want to add extra state.
• Use state-driven triggers for most cases, especially as your app scales—it keeps your data flow predictable and aligned with React's best practices.

内容的提问来源于stack exchange，提问作者Jakub Rádl