如何有条件地 return 图像 reactjs

Question

我正在做一个目前正在 React 的项目，如果满足条件，我会尝试 return 图片，我 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 />

我想要 return 一个图像，如果值为 2，如果它是 4，我想要一个不同的图像 returned 等

Answer 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>

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

如何有条件地 return 图像 reactjs

How to conditionally return an image reactjs

reactjs

material-ui