如何在TypeScript中为嵌套组件传递输入Props（React+Styled Components表单开发场景）

我来一步步帮你解决这些问题，核心就是扩展组件Props类型、正确传递Props到内部元素，以及利用styled-components的as属性来动态切换HTML标签。

1. 第一步：扩展Input组件的Props类型 #

首先，我们需要让InputProps包含所有原生输入元素（input/textarea）的Props，同时保留你自定义的label和placeholder。在TypeScript里，我们可以直接继承React提供的HTML属性类型：

import React from 'react';
import { Label, InputField } from './styles';

// 扩展Props：自定义属性 + 原生input/textarea的所有属性
type InputProps = {
  label: string;
  placeholder?: string;
} & (React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>);

这样你的Input组件就能接收onChange、value、type（包括textarea）等所有原生表单属性了。

2. 第二步：用forwardRef传递Ref（可选但推荐） #

如果你需要从父组件获取内部输入元素的Ref（比如做表单验证），需要用React.forwardRef来包裹你的组件。这样父组件传递的ref会直接指向内部的InputField：

// 用forwardRef包裹组件，指定Ref的类型为input或textarea元素
const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
  ({ label, placeholder, type = 'text', ...restProps }, ref) => {
    // 根据type决定渲染input还是textarea
    const elementType = type === 'textarea' ? 'textarea' : 'input';

    return (
      <Label>
        {label}
        {/* 用as属性指定HTML标签，展开所有剩余Props到内部元素 */}
        <InputField
          as={elementType}
          placeholder={placeholder}
          ref={ref}
          {...restProps}
        />
      </Label>
    );
  }
);

export default Input;

这里的关键是展开restProps——它会自动把onChange、value、type（除了我们已经解构的）等所有Props传递给内部的InputField。

3. 第三步：动态设置Styled Components的样式和标签 #

你之前想通过this.props.type来动态创建styled组件，其实在函数组件里不需要this，而且styled-components提供了更优雅的as属性来切换HTML标签。同时你也可以根据标签类型设置不同样式：

import styled from 'styled-components';

// 通用的输入框样式，支持切换为textarea
export const InputField = styled.input<{ as?: string }>`
  width: 100%;
  margin-left: 0.3rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;

  // 如果是textarea，添加特殊样式
  ${({ as }) => as === 'textarea' && `
    min-height: 120px;
    resize: vertical;
  `}
`;

export const Label = styled.label`
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  gap: 0.3rem;
  font-weight: 500;
`;

这样当你在父组件里写<Input type="textarea" ... />时，InputField会自动渲染为textarea元素，并应用对应的样式。

4. 第四步：在FormData中正常使用组件 #

现在你的FormData组件不需要做任何额外修改，直接传递onChange、type、value等Props即可：

import { Container } from './styles';
import Header from '../../components/Header';
import Input from '../../components/Input';
import { useState } from 'react';

const FormData: React.FC = () => {
  // 示例：用useState管理表单数据
  const [formData, setFormData] = useState({
    nome: '',
    curriculum: ''
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <Container>
      <Header>Your Data</Header>
      <fieldset>
        <legend>Personal Info</legend>
        <Input 
          label='Nome' 
          placeholder='Duck' 
          name="nome"
          value={formData.nome}
          onChange={handleInputChange} 
        />
      </fieldset>
      <fieldset>
        <legend>Profissional Info</legend>
        <Input 
          label='curriculum' 
          placeholder='123.412.123-44' 
          type="textarea"
          name="curriculum"
          value={formData.curriculum}
          onChange={handleInputChange}
        />
      </fieldset>
    </Container>
  );
};

export default FormData;

关于你之前的尝试 #

你提到用ref和forwardRef没成功，大概率是因为没有正确传递Ref的类型，或者没有展开所有Props。上面的代码里我们用forwardRef明确指定了Ref的类型（input或textarea元素），同时把所有剩余Props都展开到了内部元素，这样就能正常工作了。

另外，你问const { type } = this.props能不能行——在函数组件里不能用this.props，直接解构组件参数里的Props即可（比如我们代码里的({ label, placeholder, type = 'text', ...restProps })）。

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