如何将React子组件的属性传递给父组件并控制父级按钮状态

React 组件内部通过 useState 声明的状态是组件私有属性，仅在组件内部可访问，无法通过 import 直接导出到外部使用，你尝试直接导入子组件 condition 的写法本身不符合React的单向数据流规则。另外你父组件的返回值包含两个顶级元素（div和button），需要用Fragment包裹才能符合JSX语法要求。

基于子步骤的完成状态控制父组件按钮是多步骤引导/表单场景的常见需求，不属于反模式，但你当前直接导出子组件私有状态的实现逻辑是错误的。

方案1：状态提升（最推荐，适合步骤数量少的场景） #

将每个步骤的完成状态统一放到父组件中维护，把状态修改方法通过props传递给对应子组件，子组件触发条件后调用父组件传入的方法更新状态即可。

父组件代码示例 #

import { useState } from 'react';
import ChildOne from "../child-one";

export default function Parent() {
  const [page, setPage] = useState(1);
  // 父组件统一维护每个步骤的完成状态
  const [childOneFinished, setChildOneFinished] = useState(false);

  return (
    <>
      <div className="childRenderer">
        {page == 1 && (
          <ChildOne onFinish={setChildOneFinished} />
        )}
      </div>
      {/* 原生按钮用disabled属性，UI组件库可对应替换为isDisabled */}
      <button disabled={!childOneFinished}>Next</button>
    </>
  );
}

子组件代码示例 #

export function ChildOne({ onFinish }) {
  return (
    <div>
      <button onClick={() => onFinish(true)}>
        hello world
      </button>
    </div>
  );
}

方案2：Context 全局状态管理（适合步骤多、嵌套深的场景） #

如果你的步骤组件嵌套层级深、数量多，逐层传递props会出现prop drilling问题，可通过React内置的Context API做全局状态管理，统一存储所有步骤的完成状态，子组件和父组件都可以直接读写对应状态。

步骤上下文示例 #

// steps-context.js
import { createContext, useContext, useState } from 'react';

const StepsContext = createContext();

export function StepsProvider({ children }) {
  const [stepStatus, setStepStatus] = useState({
    1: false,
    2: false,
    // 可扩展所有步骤的默认状态
  });

  const updateStepStatus = (stepId, status) => {
    setStepStatus(prev => ({...prev, [stepId]: status}))
  }

  return (
    <StepsContext.Provider value={{ stepStatus, updateStepStatus }}>
      {children}
    </StepsContext.Provider>
  )
}

export const useSteps = () => useContext(StepsContext);

父组件和子组件都可以通过 useSteps() 钩子直接读取/更新对应步骤的状态，无需逐层传递props。

方案3：useImperativeHandle 暴露子组件方法（不推荐优先使用） #

如果不想改动子组件现有内部状态的定义，可以通过ref转发的方式让父组件主动获取子组件的状态，仅适合特殊场景使用，React官方建议优先选择状态提升的方案。

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