React中父组件如何访问嵌套在<Child1>内的<Child2>组件状态？

Hey there! When you've got a component hierarchy like <Parent> → <Child1> → <Child2> and need to access Child2's state from Parent, there are a few practical approaches to choose from. Let's walk through each one with examples:

1. Lift State Up (React's Recommended Approach) #

The simplest and most idiomatic way is to lift Child2's state up to the Parent component. This keeps your data flow predictable and aligned with React's one-way data binding principles.

How it works: #

• Move the state that Child2 needs into Parent.
• Pass the state value down to Child2 via props (through Child1 if needed).
• Pass a callback function from Parent to Child2 (again, through Child1) so Child2 can update the state when needed.

Example Code: #

// Parent.js
import { useState } from 'react';
import Child1 from './Child1';

function Parent() {
  const [child2State, setChild2State] = useState('initial value');

  // Callback to update state from Child2
  const updateChild2State = (newValue) => {
    setChild2State(newValue);
  };

  return (
    <div>
      <p>Parent accessing Child2's state: {child2State}</p>
      <Child1 child2State={child2State} updateChild2State={updateChild2State} />
    </div>
  );
}

// Child1.js
import Child2 from './Child2';

function Child1({ child2State, updateChild2State }) {
  // Just pass the props through to Child2
  return <Child2 state={child2State} updateState={updateChild2State} />;
}

// Child2.js
function Child2({ state, updateState }) {
  return (
    <input
      type="text"
      value={state}
      onChange={(e) => updateState(e.target.value)}
      placeholder="Type something..."
    />
  );
}

Pros: Clean, predictable data flow, easy to debug.
Cons: If Child2's state is only relevant to itself, this might add unnecessary props drilling (though for 2 levels, it's usually not a problem).

2. Use Forwarded Refs + useImperativeHandle #

If lifting state up doesn't make sense (e.g., Child2's state is internal but Parent needs occasional access), you can use ref forwarding along with useImperativeHandle to expose specific state or methods from Child2 to Parent.

How it works: #

• Use React.forwardRef in Child2 to pass the ref from Child1 to itself.
• Use useImperativeHandle in Child2 to define what state/methods the parent can access.
• Parent uses useRef to hold the ref to Child2, then accesses the exposed values.

Example Code: #

// Parent.js
import { useRef } from 'react';
import Child1 from './Child1';

function Parent() {
  const child2Ref = useRef(null);

  const handleAccessChild2State = () => {
    // Access the exposed state from Child2
    if (child2Ref.current) {
      console.log("Child2's state:", child2Ref.current.getState());
    }
  };

  return (
    <div>
      <button onClick={handleAccessChild2State}>Get Child2 State</button>
      <Child1 child2Ref={child2Ref} />
    </div>
  );
}

// Child1.js
import Child2 from './Child2';

function Child1({ child2Ref }) {
  // Forward the ref to Child2
  return <Child2 ref={child2Ref} />;
}

// Child2.js
import { useState, forwardRef, useImperativeHandle } from 'react';

const Child2 = forwardRef((props, ref) => {
  const [internalState, setInternalState] = useState('initial value');

  // Expose methods/state to the parent via ref
  useImperativeHandle(ref, () => ({
    getState: () => internalState,
    setState: (newValue) => setInternalState(newValue)
  }));

  return (
    <input
      type="text"
      value={internalState}
      onChange={(e) => setInternalState(e.target.value)}
      placeholder="Type something..."
    />
  );
});

export default Child2;

Pros: Keeps Child2's state internal while allowing Parent to access it when needed.
Cons: Breaks React's one-way data flow, can make debugging harder if overused. Use this sparingly!

3. Use Context API (For Deeply Nested Components) #

If your component hierarchy is deeper than just 2 levels, or multiple components need access to Child2's state, the Context API is a good choice. It lets you share state across components without prop drilling.

How it works: #

• Create a Context to hold the state and update functions.
• Wrap Parent (or a higher component) with the Context Provider, passing the state and update methods.
• Child2 consumes the Context to manage its state, and Parent can directly access the Context's state.

Example Code: #

// Child2Context.js
import { createContext, useContext, useState } from 'react';

const Child2Context = createContext();

export function Child2Provider({ children }) {
  const [child2State, setChild2State] = useState('initial value');

  return (
    <Child2Context.Provider value={{ child2State, setChild2State }}>
      {children}
    </Child2Context.Provider>
  );
}

export function useChild2Context() {
  return useContext(Child2Context);
}

// Parent.js
import { useChild2Context } from './Child2Context';
import Child1 from './Child1';

function Parent() {
  const { child2State } = useChild2Context();

  return (
    <div>
      <p>Parent accessing Child2's state via Context: {child2State}</p>
      <Child1 />
    </div>
  );
}

// Child1.js
import Child2 from './Child2';

function Child1() {
  return <Child2 />;
}

// Child2.js
import { useChild2Context } from './Child2Context';

function Child2() {
  const { child2State, setChild2State } = useChild2Context();

  return (
    <input
      type="text"
      value={child2State}
      onChange={(e) => setChild2State(e.target.value)}
      placeholder="Type something..."
    />
  );
}

// App.js (wrap Parent with Provider)
import { Child2Provider } from './Child2Context';
import Parent from './Parent';

function App() {
  return (
    <Child2Provider>
      <Parent />
    </Child2Provider>
  );
}

Pros: Eliminates prop drilling, great for state shared across multiple components.
Cons: Adds a bit of boilerplate, overkill for simple 2-level nesting.

Final Recommendation: #

Start with Lifting State Up if the state is relevant to Parent or needs to be shared. If the state is strictly internal to Child2 but Parent needs occasional access, use Forwarded Refs + useImperativeHandle. For deeper hierarchies or cross-component sharing, go with the Context API.

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