将可传递Props转换为函数以简化React组件代码

你可以直接在函数的参数列表中完成Props解构，把原来的3行解构代码压缩成1行，同时保持代码可读性：

const Dropdown = ({ name, isDisable, onChange, placeholder, value, data }: Props): React.Node => {
  return (
    <Select
      onChange={onChange}
      defaultValue={valueDefiner(value)}
      styles={SelectStyle}
      placeholder={placeholder}
      name={name}
      options={data}
      isDisabled={isDisable}
    />
  );
};

如果想进一步精简，还可以用箭头函数的隐式返回写法，省去return关键字和外层大括号：

const Dropdown = ({ name, isDisable, onChange, placeholder, value, data }: Props): React.Node => (
  <Select
    onChange={onChange}
    defaultValue={valueDefiner(value)}
    styles={SelectStyle}
    placeholder={placeholder}
    name={name}
    options={data}
    isDisabled={isDisable}
  />
);

这种在函数入参阶段直接解构的写法，既省去了单独的解构变量声明，也是React组件开发中的常见规范写法。

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