如何在 Reactjs 中正确使用条件语句和内联样式？答案

【问题标题】：How can I use conditional statements alongside inline styles correctly in Reactjs?如何在 Reactjs 中正确使用条件语句和内联样式？
【发布时间】：2020-07-20 11:13:40
【问题描述】：

我正在构建一个披萨制造商反应应用程序。一个应用程序，用户可以在其中实时构建比萨饼并订购它们。我正在尝试根据状态和输入处理程序设置一些条件样式，但我的样式没有被应用。

这是我的 JSX 代码

class PizzaBuilder extends Component {
  state = {
    sauce: {
      selected: 'Marinara'
    }
  }
  toggleSauceHandler = (type) => () => {
    this.setState({
      toggle: type
    });
  }
  render() {
    return (
      <div className={styles.Sauce}>
        <div>
          <img style={this.state.toggle==="Marinara" ? {display: 'block', position: 'absolute', zIndex: '100'}: null} src={Marinara} alt="marinara" />
        </div>
      </div>
      <div>
        <input type="radio" name="sauce" id="Marinara" value="Marinara" onChange={this.toggleSauceHandler( "Marinara")} checked={this.state.toggle==="Marinara" }/>
        <label for="Marinara">Marinara</label>
      </div>
    )
  }
}

酱汁本身设置为不显示，因为我不需要页面上显示的图像。我只想根据单选按钮的输入一一显示。

【问题讨论】：

看stackoverflow.com/questions/46322708/…。它可能会有所帮助
这叫条件渲染，工作原理是这样的：{this.state.toggle === "Marinara" && <img .../>}

标签： javascript css reactjs

【解决方案1】：

检查下面的链接，可能对你有帮助。

React - Change Inline CSS Conditionally Based on Component State

【讨论】：