React如何将子组件的选择显隐逻辑迁移至父组件？

步骤1：改造SelectBox子组件 #

移除子组件内部的状态管理和年龄输入框渲染，把选中值的回调暴露给父组件，让父组件掌控显隐逻辑：

export function SelectBox({ name, label, options, onSelect, ...props }) {
  const { register, setValue } = useFormContext();
  const { ref, ...rest } = register(name, {
    onChange: props.onChange,
  });

  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <ComboBox
        id={name}
        placeholder="请选择..."
        options={options}
        mode="select"
        onSelected={item => {
          const selectedValue = item?.value;
          setValue(name, selectedValue);
          // 把选中值传递给父组件
          onSelect?.(selectedValue);
        }}  
      />  
    </div>
  );
}

步骤2：修改父组件实现显隐控制 #

在父组件里维护选中状态（或直接监听表单字段），根据选中值控制年龄输入框的显示：

方式一：通过本地state管理选中值 #

import { useState } from 'react';

const GenderOptions = [
  {label: "男", value: "Male"},
  {label: "女", value: "Female"},
];

// 父组件内部逻辑
const [selectedGender, setSelectedGender] = useState('');

return (
  <>
    <SelectBox
      name="Gender"
      label="性别"
      options={GenderOptions}
      onSelect={(value) => setSelectedGender(value)}
    />
    {/* 根据选中性别显示年龄输入框 */}
    {selectedGender === "Female" && (
      <InputBox
        type="text"
        name="Age"
        label="年龄"
      />
    )}
  </>
);

方式二：结合react-hook-form的watch监听表单字段 #

如果父组件本身在form上下文内，直接用watch监听表单字段更简洁，无需额外维护state：

import { useFormContext } from 'react-hook-form';

const GenderOptions = [
  {label: "男", value: "Male"},
  {label: "女", value: "Female"},
];

// 父组件内部逻辑
const { watch } = useFormContext();
const selectedGender = watch('Gender');

return (
  <>
    <SelectBox
      name="Gender"
      label="性别"
      options={GenderOptions}
    />
    {selectedGender === "Female" && (
      <InputBox
        type="text"
        name="Age"
        label="年龄"
      />
    )}
  </>
);

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