javascript - 如何在 reactjs 的 render 方法中使用三元运算符？

Question

我想使用三元运算符根据某些状态条件呈现两个按钮，以避免代码重复。

我想做什么？

我有两个按钮 Cancel 和 Start 基于状态值 load_cancel。如果单击取消按钮 load_cancel 设置为 true 并且当 load_cancel 设置为 false 时显示开始按钮。所以我在 render 方法中有这样的东西

{props.item_id && this.props.load_cancel &&
    <button onClick= 
        {this.props.handle_load_start}>start</button>}
{props.item_id && !this.props.load_cancel  &&
    <button onClick={this.props.handle_load_cancel}>Cancel</button>}

我如何使用三元运算符做同样的事情？

谢谢。

Answer 1

像这样

prop.item_id ? (
  this.props.load_cancel ? (
    <button onClick={this.props.handle_load_start}>start</button>
  ) : (
    <button onClick={this.props.handle_load_cancel}>Cancel</button>
  )
) : null