TypeScript：仅传播多余的属性

Question

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


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}
      />
    </>
  );
};

Answer 1

你不应该把其他属性放到 otherProps 中吗？您可以在解构道具时执行此操作。

试试这个：

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,
  type,
  placeholder,
  ...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}
      />
    </>
  );
};

TypeScript：仅传播多余的属性

TypeScript : Spread only excess properties

typescript

reactjs

ecmascript-2016