如何在 React 组件中进行两次条件检查答案

【问题标题】：How to do conditional check twice in React component如何在 React 组件中进行两次条件检查
【发布时间】：2019-12-26 21:41:46
【问题描述】：

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

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

这很好用。现在，我需要传递另一个道具（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 的外观。但在这种情况下，我无法在错误后添加一个布尔比较。我如何使它在这种情况下工作。有什么建议吗？？？

【问题讨论】：

看起来您正在尝试实现嵌套的三元运算符：a ? b : c ? d : e 翻译为 如果a 为真，则执行b，否则检查c 是否为真如果是，请执行d，否则执行e

标签： javascript reactjs react-native react-redux boolean

【解决方案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>
  );
};

【讨论】：