React中如何通过多层子组件修改父组件状态？

你的代码里主要有三个问题导致状态修改失败：

1. 所有子组件都没有接收并使用传入的props，导致setIsLame无法被访问
2. React组件名称必须以大写字母开头（比如childComponentC要改成ChildComponentC），否则会被当成原生HTML标签处理
3. 你需要实现的是状态切换（true/false互转），而不是直接设置为true

以下是修正后的完整可运行代码：

// 父组件App
import { useState } from 'react';
import './App.css';
import ChildComponentB from './ChildComponentB'; // 确保文件路径正确

export default function App() {
  const [isLame, setIsLame] = useState(false);

  // 封装状态切换函数，也可以直接传递setIsLame
  const toggleIsLame = () => {
    setIsLame(prev => !prev);
  };

  return (
    <div className="React">
      <h1>React is {isLame ? 'lame' : 'awesome'}</h1>
      <ChildComponentB toggleIsLame={toggleIsLame} />
    </div>
  );
}

// 子组件ChildComponentB
import ChildComponentC from './ChildComponentC'; // 确保文件路径正确

export default function ChildComponentB({ toggleIsLame }) {
  return (
    <div className="React">
      <h2>Component B</h2>
      <ChildComponentC toggleIsLame={toggleIsLame} />
    </div>
  );
}

// 子组件ChildComponentC
import ChildComponentD from './ChildComponentD'; // 确保文件路径正确

export default function ChildComponentC({ toggleIsLame }) {
  return (
    <div className="React">
      <h3>Component C</h3>
      <ChildComponentD toggleIsLame={toggleIsLame} />
    </div>
  );
}

// 子组件ChildComponentD
export default function ChildComponentD({ toggleIsLame }) {
  return (
    <div className="React">
      <h4>Component D</h4>
      {/* 点击按钮触发状态切换 */}
      <button onClick={toggleIsLame}>
        切换状态：当前{toggleIsLame ? 'lame' : 'awesome'}
      </button>
    </div>
  );
}

关键说明： #

• props接收：每个子组件都通过解构赋值接收父组件传递的函数（比如{ toggleIsLame }），这样才能在子组件内部调用
• 组件命名规范：所有自定义组件首字母大写，避免React误判为原生标签
• 状态切换逻辑：使用setIsLame(prev => !prev)基于之前的状态取反，确保状态更新的准确性
• 函数传递方式：你也可以直接传递setIsLame，在ChildComponentD中调用setIsLame(prev => !prev)，效果完全一致

如果不想逐层传递props，也可以使用React的useContext来简化状态传递（不需要Redux），示例如下：

// 创建Context
import { createContext, useContext, useState } from 'react';

const IsLameContext = createContext();

// 父组件App
export default function App() {
  const [isLame, setIsLame] = useState(false);
  const toggleIsLame = () => setIsLame(prev => !prev);

  return (
    <IsLameContext.Provider value={{ isLame, toggleIsLame }}>
      <div className="React">
        <h1>React is {isLame ? 'lame' : 'awesome'}</h1>
        <ChildComponentB />
      </div>
    </IsLameContext.Provider>
  );
}

// 子组件ChildComponentB
import ChildComponentC from './ChildComponentC';

export default function ChildComponentB() {
  return (
    <div className="React">
      <h2>Component B</h2>
      <ChildComponentC />
    </div>
  );
}

// 子组件ChildComponentC
import ChildComponentD from './ChildComponentD';

export default function ChildComponentC() {
  return (
    <div className="React">
      <h3>Component C</h3>
      <ChildComponentD />
    </div>
  );
}

// 子组件ChildComponentD
export default function ChildComponentD() {
  const { isLame, toggleIsLame } = useContext(IsLameContext);
  return (
    <div className="React">
      <h4>Component D</h4>
      <button onClick={toggleIsLame}>
        切换状态：当前{isLame ? 'lame' : 'awesome'}
      </button>
    </div>
  );
}

Context方案优势： #

• 不需要逐层传递props，任何嵌套层级的组件都可以直接通过useContext获取状态和修改函数
• 适合状态需要被多个组件共享的场景，代码更简洁

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