条件图像src渲染反应

Question

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

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

这是到目前为止的代码

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

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

Answer 1

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

类似的东西：

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

Answer 2

在源代码中使用ternari：

   const [ stateImage, setStateImage ] =useState(false);

      src={stateImage ? 'one image' : 'another image'}