Question

我正在研究一个目前处于反应状态的项目，如果条件满足，我正在尝试返回一个图像，我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我想要返回不同的图像等。

Answer 1

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

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

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

如何有条件地返回图像reactjs

1 个答案: