reactjs - 条件图像 src 渲染反应

Question

我正在构建一个可重用的反应组件来显示一些带有警告图标或成功图标的自定义消息。

我将传递警告或成功道具，以便当用户想要使用该组件时，他会发送警告或成功。

这是到目前为止的代码

<img
        style={{ width: '48px', height: '48px', position: 'absolute' }}
        src={warningIcon}
      ></img>

当我创建道具并发送到子组件时，如何有条件地放置 {warningIcon} 或 {successIcon}？

标签： reactjs

Answer 1

传递成功/警告的布尔属性，并使用三元运算符有条件地设置src属性。

就像是：

const Img = ({ success }) => (
  <img
    style={{ width: '48px', height: '48px', position: 'absolute' }}
    src={success ? successIcon  : warningIcon}
  />
);