如何为功能性 React 组件建立默认道具答案

【问题标题】：How do I establish default props for functional React components如何为功能性 React 组件建立默认道具
【发布时间】：2019-12-25 00:58:24
【问题描述】：

为功能性 React 组件定义默认 prop 值的正确方法是什么？

使用 TypeScript

interface ThingProps {
    something?: number;
}

const Thing: FC<ThingProps> = (props: ThingProps): ReactElement => {
    const something = props.something || 0    
    // ...
}

任由我写

<Thing />

或

<Thing something={someValue} />

两者都能正常工作。

这是正确的习惯用法，还是 React 有不同的首选方式来实现这一点？

请注意，虽然有 answers here 与此有关，但它们已经很老了（2016 年），对我没有任何作用：它们导致 <Thing /> 的 TS 错误（缺少必需的属性）或使用 something（可能是未定义）。

【问题讨论】：

Default property value in React component using TypeScript的可能重复
@EmileBergeron 不，我看到了，但这里的问题是关于这种特定方法。这个答案是从 2016 年开始的，事情已经发生了变化。 answer there 对我不起作用。
那么请确保在您的问题中突出显示其他问题中的问题，例如提及您正在使用的 TS 版本。或悬赏旧问题以收集最新答案。
现在看起来像there's no definitive way of doing it。
@EmileBergeron 嗯，确实！现在，我似乎可以通过做我正在做的事情来两全其美（简单的 TypeScript，易于遵循并避免引入新的类型/接口）并简单地添加 Counter.defaultProps = { sequence: 0 } 告诉 React 我在做什么到。

标签： reactjs typescript react-props

【解决方案1】：

你可以直接在Thing上设置：

Thing.defaultProps = {
  something: 0
};

【讨论】：

我能从中得到什么我只使用 TypeScript 得不到的东西吗？我遇到的问题是，TypeScript 不仅本身似乎能够以明显的方式处理这个问题，而且 TypeScript 无法识别defaultProps（以及 2016 年答案中提到的其他方法） .
假设something 是必需的，而不是像您拥有的那样是可选的……如果JavaScript 应用程序正在拉入该组件，则您的<Thing /> 会将something 设置为0，并且不会抛出如果您离开道具，则会出错。但是如果你在 TypeScript 应用程序中使用 <Thing /> 组件，它仍然会抛出错误，因为 <Thing /> 期望 something 是 number。我将在组件库之类的项目中设置我的 defaultProps，我不确定哪种类型的应用正在使用该组件。
会做我上面所说的和then adding Thing.defaultProps 掩护我吗？

【解决方案2】：

您可以简单地将props 参数分配给函数声明中的默认值（或带值的对象）：

interface ThingProps {
  something?: number;
}

const Thing: React.FC<ThingProps> = (props = {something: 1337}) => {
  return <>{props.something}</>
}

或者使用我个人觉得更简洁的扩展运算符：

interface ThingProps {
  something?: number;
}

const Thing: React.FC<ThingProps> = ({something = 1337}) => {
  return <>{something}</>
}

如果您不需要在其他地方重用接口ThingProps，您甚至可以内联执行所有操作：

const Thing: React.FC<{ something?: number; }> = ({something = 1337}) => {
  return <>{something}</>
}

顺便说一句，我很确定这样做

const Thing: FC<ThingProps> = (props: ThingProps): ReactElement => {

是多余的 vs 只是做

const Thing: FC<ThingProps> = (props) => {

因为你已经在变量声明中输入了Thing 作为一个 React 函数组件并输入了 ThingProps。

【讨论】：