React Hooks中如何从含3个输入框的组件中提取指定输入项给父组件使用

不需要单独创建仅展示手机号的新组件，只需给ExistinguserInfo组件新增控制显示字段的入参即可，实现步骤如下：

• 第一步：修改ExistinguserInfo.js组件，新增showFields入参控制需要渲染的输入项

// ExistinguserInfo.js
export const ExistinguserInfo = ({ showFields = ['phone', 'areaCode', 'city'] }) => {
  // 原有onchange逻辑、状态定义、其他props代码保持不变
  return (
    <>
      {showFields.includes('phone') && (
        <myfield.Input
          id="q-phonenumber"
          label="Phone number"
          value={PhNumber}
          maxLength={10}
        />
      )}
      {showFields.includes('areaCode') && (
        <myfield.Input
          id="q-areaCode"
          label="areaCode"
          value={areaCode}
          maxLength={10}
        />
      )}
      {showFields.includes('city') && (
        <myfield.Input
          id="q-city"
          label="City"
          value={city}
          maxLength={10}
        />
      )}
    </>
  )
}

• 第二步：修改userinfo.js中调用组件的逻辑，不同步骤传入对应需要显示的字段数组即可

// userinfo.js
export const userInfor = () => {
  // 原有其他逻辑代码保持不变
  const step1 = () => {
    return {
      title: 'phonenumber',
      body: (
        <ExistinguserInfo showFields={['phone']}/>
      )  
    }
  }
  const step2 = () => {
    return {
      title: 'Areacode && City',
      body: (
        <ExistinguserInfo showFields={['areaCode', 'city']}/>
      ),
    }
  }
  // 原有其他逻辑代码保持不变
}

如果后续业务有其他复用场景，也可以将三个输入框拆分为独立的小组件，在不同步骤按需引入即可，当前场景用上述传参控制的方案成本最低、改动最小。

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