当我不包含可选道具时，为什么会出现不变违规？

Question

这与我在此处提出的上一个问题（How do I style a material-ui Icon which was passed as prop）有关。我原来的问题已解决（即，将Icon元素作为道具传递并在接收组件中进行样式设置）。

但是我希望该道具是可选的。当我不通过时，我会得到不变违反，我无法弄清楚。我已经尝试了许多选项来处理“未定义”的道具，但无济于事。

请在此处查看问题。

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

Answer 2

您可以将默认值设置为StatusImage：

function MyComponentWithIconProps(props) {
  const styles = useStyles();

  const { statusImage: StatusImage = 'div' } = props;
  // OR
  // const MyDiv = (props) => <div {...props} />
  // const { statusImage: StatusImage = MyDiv } = props;

  return (
      <div>
        <StatusImage className={styles.iconStyle} />
      </div>
  );
}