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

Question

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

使用打字稿

interface ThingProps {
    something?: number;
}

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

让我写一个

<Thing />

或

<Thing something={someValue} />

两者都可以正常工作。

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

请注意，虽然有关于这个，但它们已经很老了（2016 年）并且 none 对我有用：它们导致 <Thing /> 的 TS 错误（缺少必需的属性) 或 something 的使用（可能未定义）。

Answer 1

您可以直接在 Thing 上设置它们：

Thing.defaultProps = {
  something: 0
};

Answer 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 => {

与只是做

相比是多余的

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

因为你已经输入了 Thing 作为 React 函数式组件，并且在变量声明中输入了 ThingProps 的 props。

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

How do I establish default props for functional React components

typescript

reactjs

react-props