React中能否将setState作为props传递，实现子组件修改父组件状态？

首先直接给结论：你提到的这种通过传递setState（或者像你代码里传整个组件实例this）来让子组件修改父组件状态的做法是可行的，但从代码规范、可维护性和组件封装性的角度来说，这并不是最优解。

先聊聊你的代码实现：
你在App组件里绑定了setState，然后通过{...this}把整个组件实例传给了Child，这种写法确实能实现点击按钮修改父组件状态，但有几个明显的问题：

• 子组件拿到了整个父组件实例，意味着它可以随意访问父组件的所有状态、方法，甚至修改一些你不想让它碰的内容，这完全打破了组件间的封装边界，很容易引发意外的bug。
• 代码的可读性很差，其他开发者看到self.setState时，得花时间搞清楚这个self到底是什么，维护成本很高。

更规范的实现方式 #

React的核心设计理念是单向数据流，父组件可以通过props传递修改状态的回调函数给子组件，子组件只需要调用这个回调就能触发父组件的状态更新，这样既实现了需求，又保证了组件间的解耦。

类组件版本（适配你的原代码风格）

class App extends Component {
  constructor() {
    super();
    this.state = { name: "React" };
    // 封装专门的状态更新方法并绑定this
    this.updateUserName = this.updateUserName.bind(this);
  }

  // 明确的状态更新逻辑，方便后续扩展
  updateUserName(newName) {
    this.setState({ name: newName });
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p> Start editing to see some magic happen :) </p>
        {/* 只传递需要的回调函数，而非整个组件实例 */}
        <Child onUpdateName={this.updateUserName} />
      </div>
    );
  }
}

// 子组件只接收需要的props，职责清晰
const Child = ({ onUpdateName }) => {
  return (
    <button onClick={() => onUpdateName("viswa")}>
      Click to Change Name
    </button>
  );
}

函数组件+Hook版本（现在更推荐的写法）

如果是用React Hooks的话，代码会更简洁：

import { useState } from 'react';

function App() {
  const [name, setName] = useState("React");

  // 封装状态更新逻辑
  const updateUserName = (newName) => {
    setName(newName);
  };

  return (
    <div>
      <Hello name={name} />
      <p> Start editing to see some magic happen :) </p>
      <Child onUpdateName={updateUserName} />
    </div>
  );
}

const Child = ({ onUpdateName }) => {
  return (
    <button onClick={() => onUpdateName("viswa")}>
      Click to Change Name
    </button>
  );
}

为什么推荐这种方式？ #

• 封装性更强：子组件只能拿到它需要的回调函数，无法触及父组件的其他内部细节，避免了组件间不必要的耦合。
• 可读性更高：从onUpdateName这个props名称就能一目了然知道它的作用，代码逻辑清晰，后续维护起来更轻松。
• 符合React设计思想：严格遵循单向数据流，数据的流向和状态更新的触发都清晰可控，减少了调试难度。

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