如何在 Reactjs 中正确使用条件语句和内联 styles？

Question

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

这是我的 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>
    )
  }
}

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

Answer 1

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

React - 根据组件有条件地更改内联 CSS State