如何为子组件的函数类型props设置默认值？

针对你遇到的问题，有两种直接的解决思路：

1. 为函数类型Prop设置默认值 #

在子组件解构Prop时，直接给setState指定一个空函数作为默认值，这样即使父组件不传这个Prop，调用时也不会报错：

const A = () => {
  const setState = () => {
    console.log("A fire");
  };

  return <Child setState={setState} />;
};

const B = () => {
  return <Child />;
};

const Child = ({ setState = () => {} }) => {
  setState();
  return <div>hello</div>;
};

如果需要兼容更旧的写法，也可以通过defaultProps定义默认值（不过现在更推荐上面的解构赋值方式）：

const Child = ({ setState }) => {
  setState();
  return <div>hello</div>;
};

Child.defaultProps = {
  setState: () => {}
};

2. 仅当函数存在时才执行 #

在调用setState前先判断它是否为有效函数，或者使用可选链操作符简化判断：

方式一：条件判断 #

const Child = ({ setState }) => {
  if (typeof setState === 'function') {
    setState();
  }
  return <div>hello</div>;
};

方式二：可选链操作符 #

const Child = ({ setState }) => {
  setState?.();
  return <div>hello</div>;
};

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