TypeScript：只传播多余的属性

问题描述

在 react 中使用 typescript，我的组件有一个接口，它具有一些必要的属性，但我希望能够传递额外的属性并仅获取那些多余的属性。
请检查以下损坏的代码以获得预期结果

interface InputFieldProps {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  [otherProps: string]: unkNown;
}

const InputField = (props: InputFieldProps) => {
  console.log(props);

  return (
    <>
      <label htmlFor={props.name}>
        {props.label}
      </label>
      <Field
        id={props.name}
        name={props.name}
        type={props.type ? props.type : undefined}
        placeholder={props.placeholder ? props.placeholder : undefined}
        // Spread otherProps here
        {...props.otherProps}
      />
    </>
  );
};

解决方法

您不应该将其他属性放在 otherProps 中吗？您可以在解构 props 时执行此操作。

试试这个：

interface InputFieldProps {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  [key: string]: unknown;
}

const InputField = ({
  name,label,type,placeholder,...otherProps
}: InputFieldProps) => {
  return (
    <>
      <label htmlFor={name}>{label}</label>
      <Field
        id={name}
        name={name}
        type={type ? type : undefined}
        placeholder={placeholder ? placeholder : undefined}
        // Spread otherProps here
        {...otherProps}
      />
    </>
  );
};

您还可以为解构的 props 添加别名以避免冲突。

const InputField = ({
  name: nameProp,label: labelProp,...otherProps
}: InputFieldProps) => {
  return (
    <>
      <label htmlFor={nameProp}>{labelProp}</label>
      <Field
        id={nameProp}
        name={nameProp}
        type={type ? type : undefined}
        placeholder={placeholder ? placeholder : undefined}
        // Spread otherProps here
        {...otherProps}
      />
    </>
  );
};