ReactJS中能否跳过子组件，实现孙组件直接触发父组件事件？

Question: #

I’m wondering if it’s possible for a grandchild component in ReactJS to trigger an event that directly runs the top-level parent’s logic, without going through the intermediate child component. Currently, my setup has the grandchild calling a method in the child, which then calls the parent’s method (resulting in Grandchild → Child → Parent console logs). I want to skip the child’s intermediate step so the flow is Grandchild → Parent directly. If this can’t be done with simple chaining, please let me know.

Here’s my current code:

Parent Component

export default class Parent extends React.Component {
  render() {
    return (
      <div>
        Parent
        <Child clickMe={this.fireEvent.bind(this)}/>
      </div>
    )
  }
  fireEvent() {
    console.log("Parent")
  }
}

Child Component

export default class Child extends React.Component {
  render() {
    return(
      <div>
        child
        <Grandchild fireEvent={this.handleClick.bind(this)}/>
      </div>
    )
  }
  handleClick() {
    console.log('Child')
    this.props.clickMe();
  }
}

Grandchild Component

export default class Grandchild extends React.Component {
  render() {
    return(
      <div>
        grandchild
        <button onClick={this.handleClick.bind(this)}>GC Click</button>
      </div>
    )
  }
  handleClick() {
    console.log('Grandchild')
    this.props.fireEvent();
  }
}

Answer: #

Absolutely, you can skip the intermediate child component! There are a couple of straightforward ways to achieve this, depending on your component tree depth and needs:

1. Pass the Parent’s Method Directly Through Props (Simplest for Shallow Nesting)

Instead of wrapping the parent’s method in the child’s handleClick, just pass the parent’s method directly to the grandchild via the child’s props. This way, the child acts as a "pass-through" without adding any logic:

Modified Child Component

export default class Child extends React.Component {
  render() {
    return(
      <div>
        child
        {/* Pass the parent's method directly to Grandchild */}
        <Grandchild fireEvent={this.props.clickMe}/>
      </div>
    )
  }
  // Remove the handleClick method entirely
}

Now when you click the button in Grandchild, it will log Grandchild followed by Parent—no Child log, since we skipped that intermediate step.

2. Use React Context API (Better for Deeper Component Trees)

If your component tree is deeper than just three levels, or if multiple components need access to the parent’s method, using the Context API is a cleaner approach. It lets you share the method across components without prop drilling:

Step 1: Create a Context

// EventContext.js
import React from 'react';

export const EventContext = React.createContext();

Step 2: Wrap Parent with the Context Provider

// Parent Component
import { EventContext } from './EventContext';

export default class Parent extends React.Component {
  fireEvent() {
    console.log("Parent")
  }

  render() {
    return (
      <EventContext.Provider value={this.fireEvent.bind(this)}>
        <div>
          Parent
          <Child />
        </div>
      </EventContext.Provider>
    )
  }
}

Step 3: Consume the Context in Grandchild

// Grandchild Component
import { EventContext } from './EventContext';

export default class Grandchild extends React.Component {
  static contextType = EventContext;

  handleClick() {
    console.log('Grandchild');
    // Call the parent's method directly from context
    this.context();
  }

  render() {
    return(
      <div>
        grandchild
        <button onClick={this.handleClick.bind(this)}>GC Click</button>
      </div>
    )
  }
}

Modified Child Component (No Props Needed!)

export default class Child extends React.Component {
  render() {
    return(
      <div>
        child
        <Grandchild />
      </div>
    )
  }
}

This approach completely eliminates prop drilling—your child component doesn’t need to know anything about the parent’s method. The grandchild directly accesses it from the context.

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