在 React 中获取 props 的最简洁方式答案

【问题标题】：Most concise way to take props in React在 React 中获取 props 的最简洁方式
【发布时间】：2022-01-21 13:53:42
【问题描述】：

我所知道的用于编写 React 组件的最简洁的语法如下，它总是将每个输入参数命名两次。

export function InputXl({
  placeholder,
  value,
}: {
  placeholder: string;
  value: string;
}): JSX.Element {
  return (
    <Input placeholder={placeholder} value={value} size="xl" />
  );
}

是否有一种语法，我只需为参数命名一次？比如：

export function InputXl({
  placeholder: string;
  value: string;
}): JSX.Element {
  return (
    <Input placeholder={placeholder} value={value} size="xl" />
  );
}

【问题讨论】：

你试过单独声明你的道具类型吗？

标签： reactjs typescript react-hooks

【解决方案1】：

我觉得这是最简洁的：

type InputXlProps = {
  value: string;
  placeholder: string;
};

export const InputXl: React.FC<InputXlProps> = (props) => (
  <Input placeholder={props.placeholder} value={props.value} size="xl" />
);

【讨论】：

【解决方案2】：

如果你使用打字稿，你可以像这样定义你的组件道具类型：

type InputXlProps = {
  value: string;
  placeholder: string;
};

export function InputXl(props: InputXlProps): JSX.Element {
  return (
    <Input placeholder={props.placeholder} value={props.value} size="xl" />
  );
}

或：

export function InputXl({ value, placeholder }: InputXlProps): JSX.Element {
  return (
    <Input placeholder={props.placeholder} value={props.value} size="xl" />
  );
}

最后不鼓励使用 React.Fc，你可以在这里看到原因：

Remove React.FC from Typescript template

【讨论】：