reactjs - 条件图像 src 渲染 react

Question

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

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

这是到目前为止的代码

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

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

Answer 1

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

类似于:

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