使用else if语句重构组件

by admin Posted on

我的问题是如何重构我的代码，首先，我有一个item.status，它可以是"active"，"non_active“和"pending"，当这个item.status是"active”时，我呈现一个按钮，当这个项目是"inactive“时，我呈现另一个按钮，但当这个项目是"pending”时，我会呈现这两个按钮，所以我非常感谢您的帮助。

下面是我的代码：

const renderAcceptActions = (item, onClickActivate, onClickDeactivate) => {
    if (item.status == "non_active") {
      return (
        <td>
          {onClickActivate && (
            <CButton
              color="primary"
              variant="outline"
              size="sm"
              className="mr-2"
              onClick={() => onClickActivate(item)}
            >
              Ativar
            </CButton>
          )}
        </td>
      );
    } else if (item.status == "active") {
      return (
        <td>
          {onClickDeactivate && (
            <CButton
              color="danger"
              variant="outline"
              size="sm"
              onClick={() => onClickDeactivate(item)}
            >
              Desativar
            </CButton>
          )}
        </td>
      );
    } else {
      return (
        <td>
          {onClickActivate && (
            <CButton
              color="primary"
              variant="outline"
              size="sm"
              className="mr-2"
              onClick={() => onClickActivate(item)}
            >
              Ativar
            </CButton>
          )}
          {onClickDeactivate && (
            <CButton
              color="danger"
              variant="outline"
              size="sm"
              onClick={() => onClickDeactivate(item)}
            >
              Desativar
            </CButton>
          )}
        </td>
      );
    }
  };

转载请注明出处:http://www.dbgszz.com/article/20230330/1767215.html