React中如何用三元表达式实现多条件渲染？按钮切换问题求助

原表达式的逻辑错误 #

你写的三元表达式逻辑完全混乱了：

{this.state.userAge < 18 ? (this.state.userAge >= 18 ? buttonTwo : buttonOne): buttonThree}

外层判断userAge < 18时，内层又判断userAge >=18，这永远不会成立，所以此时会显示buttonOne；当userAge >=18时，外层条件不成立，直接显示buttonThree——这完全和你的需求相反，自然达不到预期效果。

正确的逻辑与三元表达式 #

你的需求是：点击第一个按钮后，根据输入值判断：

• 数值>18 → 显示第二个按钮
• 数值<18 → 显示第三个按钮
• 未点击第一个按钮时，显示第一个按钮

所以需要额外一个状态（比如isChecked）来标记是否触发了判断逻辑，正确的三元表达式应该是：

{this.state.isChecked ? (this.state.userAge > 18 ? buttonTwo : buttonThree) : buttonOne}

完整的React组件示例 #

import React, { Component } from 'react';

class AgeChecker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userAge: '',
      isChecked: false
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.checkAge = this.checkAge.bind(this);
  }

  handleInputChange(e) {
    this.setState({ userAge: parseInt(e.target.value) || '' });
  }

  checkAge() {
    this.setState({ isChecked: true });
  }

  render() {
    const buttonOne = <button onClick={this.checkAge}>点击判断年龄</button>;
    const buttonTwo = <button>年龄大于18</button>;
    const buttonThree = <button>年龄小于18</button>;

    return (
      <div>
        <input
          type="number"
          value={this.state.userAge}
          onChange={this.handleInputChange}
          placeholder="输入年龄"
        />
        {this.state.isChecked ? (this.state.userAge > 18 ? buttonTwo : buttonThree) : buttonOne}
      </div>
    );
  }
}

export default AgeChecker;

补充说明 #

• 输入框做了数值转换处理，避免非数字值干扰判断逻辑
• isChecked状态用来控制判断流程，确保初始显示第一个按钮，点击后才切换对应按钮
• 如果需要重复判断，可以修改checkAge方法，或者添加重置按钮重置isChecked状态

内容的提问来源于stack exchange，提问作者Victor God's power