如何有条件地返回图像reactjs答案

【问题标题】：How to conditionally return an image reactjs如何有条件地返回图像reactjs
【发布时间】：2018-04-19 06:50:31
【问题描述】：

我正在处理一个目前正在进行反应的项目，如果满足条件，我正在尝试返回图像，我有 looked into it 并且有几种方法可以在反应中执行条件但我没有看到任何对我有帮助的东西。我也在使用 material-ui 这里是我的一些代码：

constructor(props) {
super(props);
this.state = { value: 1 };
}

handleChange = (event, target, value) => {
this.setState({ value });
};

render() {
return (
  <div className="background">
    <div>
      <MuiThemeProvider>
        <DropDownMenu value={this.state.value} onChange=
{this.handleChange}>
          <MenuItem value={1} primaryText="Any" />
          <MenuItem value={2} primaryText="ex" />
          <MenuItem value={3} primaryText="am" />
          <MenuItem value={4} primaryText="p" />
          <MenuItem value={5} primaryText="l" />
          <MenuItem value={6} primaryText="e" />
        </DropDownMenu>
      </MuiThemeProvider>
      <br />

如果值为 2，我想返回一个图像，如果它是 4，我想返回一个不同的图像，等等。

【问题讨论】：

当你说“返回图像”时，你的意思是添加一个leftIcon 或rightIcon 属性吗？ <MenuItem value={2} primaryText="ex" leftIcon={<ContentLink />} />
@Rick 我的意思是在下拉菜单下返回一张图片，谢谢
然后将这些细节包含在问题中会有所帮助。你说你已经“调查过了，有几种方法可以做条件”；发布您尝试过的内容。如果你读过reactjs.org/docs/conditional-rendering，那么你应该知道所有需要知道的。
对不起@chipit24 这是我读过的第一个问题，我只是不知道如何弯曲它来做我想做的事，我不是最擅长的做出反应。我只是寻求一点帮助。

标签： reactjs material-ui

【解决方案1】：

您可以轻松地将任何条件添加到 React 渲染内容中。恕我直言，最干净的方法是使用内联三元条件：

<div>
  {
    this.state.value === 2 ? getImageFor2() : null
  }
  {
    this.state.value === 4 ? getImageFor4() : null
  }
</div>

回想一下，在 React 中返回 null 或 undefined 会导致该部分不会被渲染。

您也可以利用&&/|| 的行为方式来做到这一点：

<div>
  {
    this.state.value === 2 && getImageFor2()
  }
  {
    this.state.value === 4 && getImageFor4()
  }
</div>

我个人更喜欢第一个选项，因为如果你不小心，第二个可能会在某些情况下导致错误。

【讨论】：

谢谢马特，我以前试过这个，但一定是在某个地方出错了。尽管如此，这对我来说现在仍然有效。