Question

我认为我的实施可能过于复杂。它按预期工作，但我认为可以对其进行优化或更好地实施。

我的对象包含：

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>
  );
};

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

Answer 1

您的状态对象无效-不应分配=。您的状态对象应为：

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>
  );
};

Answer 2

状态对象：

status = {
   loginError: false,
   errorReason: ''
}

表格：

const MyForm = props => {
   const { loginError, errorReason } = props
   return(
   <Form>
       {loginError && (
          errorReason  === "1" ?  <Signup/> : <ErrorBox errorReason={errorReason} />
       )}
   </Form>
  )
}

ErrorBox组件：

const ErrorBox = ({ errorReason }) => {

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

  if(errorReason === "2") {
      error = {
        icon: "user",
        info: "ERROR 2",
        color: "#fff"
      };
  } else if(errorReason === "3") {
      error = {
        icon: "password",
        info: "ERROR 3",
        color: "#000"
      };
  }

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

或

const errorsList = [
  { icon: "", info: "", color: ""},
  { icon: "user", info: "ERROR 2", color: "#fff" },
  { icon: "password", info: "ERROR 3", color: "#000" }
];

const ErrorBox = ({ errorReason }) => {

  const error = errorsList[+errorReason - 1] || errorsList[0];

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

演示：

反应简化的切换和条件渲染？

2 个答案: