javascript - 如何在React组件中进行两次条件检查

Question

我有一个 React 组件，如图所示。我正在传递 prop hasItems 并基于此 boolean 值，我将显示 PaymentMessage 组件或显示 AddItemsMessage 组件。

export const PayComponent = ({
  hasItems
}: props) => {
  return (
    <Wrapper>
      {hasItems ? (
        <PaymentMessage />
      ) : (
        <AddItemsMessage />
      )}
      <Alerts
        errors={errors}
      />
    </Wrapper>
  );
};

这个效果很好。现在，我需要传递另一个 Prop ( paymentError )。因此，基于此，我将 JSX 修改如下。我将使用评论部分突出显示我添加的部分，以便更容易看到。

export const PayComponent = ({
  hasItems,
  paymentError //-----> added this
}: props) => {
  return (
    <Wrapper>
  {!paymentError ? ( //----> added this. This line of code errors out
      {hasItems ? (
        <PaymentMessage />
      ) : (
        <AddItemsMessage />
      )}
):(  //-----> added this
      <Alerts
        errors={errors}
      />
) //-----> added this
    </Wrapper>
  );
};

基本上，我将再获取一个输入属性并修改我的 JSX 的外观。但在这种情况下，我无法在错误后添加一个 boolean 比较。在这种情况下我该如何让它工作。有什么建议吗？？？

Answer 1

我建议您创建一个函数来处理此行为。更容易阅读和维护

export const PayComponent = ({
  hasItems,
  paymentError
}: props) => {
  const RenderMessage = () => {
    if (hasItems) {
      if (paymentError) {
        return <PaymentMessage />
      }
      return <AddItemsMessage />
    }
    return <Alerts errors={errors}/>
  };

  return (
    <Wrapper>
      <RenderMessage />
    </Wrapper>
  );
};