Question

为功能性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错误（缺少必需的属性）或使用{{ 1}}（可能未定义）。

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功能组件，并将props输入为ThingProps。

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

2 个答案: