React JS类组件中如何基于多条件判断返回对应按钮

下面提供两种常用的实现方式，可根据业务逻辑复杂度选择：

写法1：JSX内嵌套三元运算符（适合逻辑简单的场景） #

直接在render方法的返回值中嵌入判断即可：

render() {
  // 注意此处变量取值来源请根据实际情况调整，若来自props请换成this.props
  const { credentials, username, paused } = this.state;
  return (
    <div>
      {/* 此处省略你组件其他渲染内容 */}
      {credentials.username === username ? (
        paused ? (
          <MyButton
            tip="Un Pause Job"
            onClick={this.handleUnPause}
          >
            Unpause
          </MyButton>
        ) : (
          <MyButton
            tip="Pause Job"
            onClick={this.handlePause}
          >
            Pause
          </MyButton>
        )
      ) : null}
    </div>
  )
}

写法2：提前计算渲染内容（逻辑复杂更推荐，可读性和可维护性更高） #

把条件判断逻辑抽离到return语句之前，后续要新增判断条件时更方便修改：

render() {
  // 注意此处变量取值来源请根据实际情况调整，若来自props请换成this.props
  const { credentials, username, paused } = this.state;
  let actionButton = null;

  if (credentials.username === username) {
    actionButton = paused ? (
      <MyButton
        tip="Un Pause Job"
        onClick={this.handleUnPause}
      >
        Unpause
      </MyButton>
    ) : (
      <MyButton
        tip="Pause Job"
        onClick={this.handlePause}
      >
        Pause
      </MyButton>
    )
  }

  return (
    <div>
      {/* 此处省略你组件其他渲染内容 */}
      {actionButton}
    </div>
  )
}

提示：如果你的handlePause和handleUnPause方法没有提前绑定this，需要在构造函数中绑定，或者写成箭头函数方法，避免点击时this指向错误。

内容的提问来源于stack exchange，提问作者benpalmer