reactjs - 在 react js 中的函数组件中传递默认 Prop

Question

我创建了一个需要 2 个 Prop 的 react 组件:func1 , func2 .

const Component = ({ func1, func2 }) => {
  return (
          <Button
            onClick={() => {
              func1();
              func2();
            }}
            
          >
            Click
          </Button>
  );
};

上述组件是可重用的。我有一种情况，我在这个组件中将两个函数 (func1, func2) 作为 props 传递:

<Component func1={functionA} func2={functionC}/>

我也有不通过两个 Prop 的情况:

<Component func1={functionA}/>

最后一种情况，如何设置 func2作为替代 Prop ？

Answer 1

您可以在声明组件时简单地设置一个默认参数:

const Component = ({ func1, func2 = null }) => {
  return (
          <Button
            onClick={() => {
              func1();
              if (func2 && typeof func2 === "function") {
                func2();
              }
            }}
            
          >
            Click
          </Button>
  );
};

您的 func2现在将等于 null (或您想分配的任何值)当没有提供 Prop 时。