时间戳

首页 > 解决方案 > React 简化开关和条件渲染？

javascript - React 简化开关和条件渲染？

问题描述

我想我的实现可能过于复杂。它按预期工作，但我觉得可以更好地优化或实施。

我的对象包含：

status = {
   loginError = false,
   ErrorReason = ""
}

在我的表单中，我使用status对象来渲染组件来处理任何错误。

const Form = props => {
   const { loginError, ErrorReason } = props
   return(
   <Form>
       {ErrorReason  === "1" && loginError && <Signup/> }
    {ErrorReason  !== "1" && loginError && <ErrorBox ErrorReason={ErrorReason } />} 
   </Form>
  )
}

最后在我的ErrorBox组件中。我显示一个对话框

const ErrorBox = ({ ErrorReason }) => {

  let error = {
    icon: "",
    info: "",
    color: ""
  };

  switch (loginErrorReason) {
    case "2":
      error = {
        icon: "user",
        info: "ERROR 2",
        color: "#fff"
      };
      break;
    case "3":
      error = {
        icon: "password",
        info: "ERROR 3,
        color: "#000"
      };
      break;
    default:
      break;
  }

  return (
      <div>
        <Icon
          type={error.icon}
          style={{ fontSize: 22, marginRight: 12, color: `${error.color}` }}
        />
        {error.info}
      </div>
  );
};

有没有更好的方法来处理这些错误或以更短、更优雅的方式编写整个实现？

标签： javascriptreactjsconditional-statements

解决方案

您的状态对象无效 - 它不应该=用于分配。您的状态对象应该是：

status = {
   loginError: false,
   ErrorReason: null
}

在您的表格中，您可以执行以下操作：

<Form>
  {loginError ? (
    <>
      {ErrorReason  === "1" ? (
        <Signup/>
      ) : (
        <ErrorBox ErrorReason={ ErrorReason } />
      )}
    </>
  ) : (
      //not login error
  )}
</Form>

您的 ErrorBox 组件似乎没问题。除非您打算在那里做某事，否则您不需要在 switch 块中使用 default 子句。

const ErrorBox = ({ ErrorReason }) => {

  let error = {
    icon: "",
    info: "",
    color: ""
  };

  switch (loginErrorReason) {
    case "1":
      error = {
        icon: "user",
        info: "ERROR 1",
        color: "#fff"
      };
      break;
    case "2":
      error = {
        icon: "password",
        info: "ERROR 2,
        color: "#000"
      };
      break;
  }

  return (
      <div>
        <Icon
          type={error.icon}
          style={{ fontSize: 22, marginRight: 12, color: `${error.color}` }}
        />
        {error.info}
      </div>
  );
};

推荐阅读