React：如何在子组件中调用父组件方法

Hey there! No worries at all—we’ve all been there as React newbies 😊 Let’s break down exactly how to let your AccordionItem components trigger methods in their parent Accordion component, while keeping each item’s expand/collapse state independent.

Core Idea #

The standard React way to handle this is passing parent methods down as props to child components. Your parent component will define the method you want to call, then you’ll pass that method as a prop to each AccordionItem. The child can then invoke this prop whenever it needs to communicate with the parent.

Step-by-Step Code Example #

1. Parent Accordion Component

First, define the method in your parent component (let’s say you want to log when an item is toggled, or update some parent-level state). Then pass this method to each AccordionItem via a prop (we’ll use onItemToggle as an example):

import { useState } from 'react';
import AccordionItem from './AccordionItem';

function Accordion() {
  // Optional: Parent-level state if you need to track all items' states
  // const [itemStates, setItemStates] = useState({});

  // Method to be called from child components
  const handleItemToggle = (itemId, isExpanded) => {
    console.log(`Item ${itemId} was toggled to ${isExpanded ? 'expanded' : 'collapsed'}`);
    // Add your parent logic here—e.g., update parent state, trigger API calls, etc.
  };

  return (
    <div className="accordion">
      <AccordionItem 
        id="item-1" 
        title="First Item" 
        onItemToggle={handleItemToggle} 
      />
      <AccordionItem 
        id="item-2" 
        title="Second Item" 
        onItemToggle={handleItemToggle} 
      />
      <AccordionItem 
        id="item-3" 
        title="Third Item" 
        onItemToggle={handleItemToggle} 
      />
    </div>
  );
}

export default Accordion;

2. Child AccordionItem Component

In your child component, accept the onItemToggle prop, then call it whenever you need to trigger the parent method (e.g., when the user clicks to expand/collapse the item):

import { useState } from 'react';

function AccordionItem({ id, title, onItemToggle }) {
  // Your existing independent state for expand/collapse
  const [isExpanded, setIsExpanded] = useState(false);

  const handleClick = () => {
    const newExpandedState = !isExpanded;
    setIsExpanded(newExpandedState);
    
    // Call the parent method here, passing any relevant data
    onItemToggle(id, newExpandedState);
  };

  return (
    <div className="accordion-item">
      <button className="accordion-header" onClick={handleClick}>
        {title}
        <span>{isExpanded ? '▼' : '▶'}</span>
      </button>
      {isExpanded && (
        <div className="accordion-content">
          This is the content for {title}
        </div>
      )}
    </div>
  );
}

export default AccordionItem;

Key Notes #

• Props are the bridge: This pattern follows React’s one-way data flow—parent passes down methods, child calls them to send data back up.
• Pass relevant data: When calling the parent method, include any info the parent needs (like the item ID or new expanded state) so it can act accordingly.
• Keep local state: Since you want each item to have independent expand/collapse state, we’re keeping isExpanded in the child component—no need to move it to the parent unless you need to control all items from the top.

If you have a specific parent method in mind (like syncing all items, or triggering a global action), just adjust the handleItemToggle function in the parent to match your needs!

内容的提问来源于stack exchange，提问作者James Howell