reactjs - 当我不包含可选 Prop 时，为什么会出现不变违规？

Question

这与我在此提出的上一个问题有关(How do I style a material-ui Icon which was passed as prop)。我原来的问题得到了解决(即将 Icon 元素作为 prop 传递并在接收组件中对其进行样式设置)。

但是我希望该 Prop 是可选的。当我没有通过它时，我会得到一个我无法弄清楚的不变违规。我尝试了多种选项来处理“未定义”的 Prop ，但无济于事。

请参阅此处了解该问题。

Answer 1

那是因为你没有正确渲染你的div，它必须由函数渲染

const Div = () => <div />;

function MyComponentWithIconProps(props) {
  const styles = useStyles();
  const StatusImage = props.statusImage ? props.statusImage : Div;
  return (
    <div>
      <StatusImage className={styles.iconStyle} />
    </div>
  );
}

https://codesandbox.io/s/add-class-to-icon-prop-nmpw8?fontsize=14&hidenavigation=1&theme=dark