为嵌套的 if 条件反应条件渲染答案

【问题标题】：React conditional rendering for nested if condition为嵌套的 if 条件反应条件渲染
【发布时间】：2021-08-12 10:47:00
【问题描述】：

我想检查多个嵌套条件。 Cant似乎想出了一种方法来做到这一点。首先检查是否正常，并且没有问题，但是在第一次检查之后，当我添加第二次检查时，无论我使用哪个大括号来包装它仍然会引发错误。

示例代码：

  return (
      <Fragment>
        <div>
          { title }
        </div>
        <div>
          { check1 ?
            (<p>
              Status
            </p>

             { check2 ? 
              <p>
              <a >
             desc </a> desc
            </p> :
            <a>
            desc
          </a>
            }
            )
            :
            {
              check3 ?
              <p>
              <a>
                anchor
              </a>
              desc
            </p>
            :
            <p>
            <a 
             anchor
            </a>
            desc
          </p>
          }
        }
        </div>
      </Fragment>

【问题讨论】：

您可能正在寻找这个。 stackoverflow.com/questions/37312122/…

标签： javascript reactjs

【解决方案1】：

一个工作版本如下所示

return (
  <div>
    {check1 
        ? <div><p>Status</p>{ check2 ? <p><a>desc</a>desc</p> : <a>desc</a> }</div> 
        : check3 ? <p><a>anchor</a>desc</p> : <p><a>anchor</a>desc</p>
        }
   </div>
)

与原始的相比，我们可以看到我们需要避免{}直接在{}内部，并且为?:的每个分支返回不超过一个根元素。

return (
  <div>
    {check1 
        ? (<p>Status</p> { check2 ? <p><a>desc</a>desc</p> : <a>desc</a> }) 
        : {check3 ? <p><a>anchor</a>desc</p> : <p><a>anchor</a>desc</p>}
    }
  </div>
)

【讨论】：

【解决方案2】：

老兄，你有一个严重的格式问题，虽然那里有一些丢失的符号和片段，所以，试试这个：

return (
  <Fragment>
    <div>{title}</div>
    <div>
      {check1 ? (
        <Fragment>
          <p>Status</p>

          {check2 ? (
            <p>
              <a>desc</a> desc
            </p>
          ) : (
            <a>desc</a>
          )}
        </Fragment>
      ) : (
        <Fragment>
          {check3 ? (
            <p>
              <a>anchor</a>
              desc
            </p>
          ) : (
            <p>
              <a>anchor</a> desc
            </p>
          )}
        </Fragment>
      )}
    </div>
  </Fragment>
)

【讨论】：

【解决方案3】：

使用“()”这种大括号。您可能遇到问题，因为三元运算符中的每个输入都期望 jsx 具有单亲。像这样的

<div>
      { check1 ?
        <>
        <p>
          Status
        </p>
        ( check2 ?<p><a >desc </a> desc</p>
         :<a>desc </a>
         )
         </>
        
        :
        (
          check3 ?
          <p>
          <a>
            anchor
          </a>
          desc
        </p>
        :
        <p>
        <a>
         anchor
        </a>
        desc
      </p>
        )
    }
    </div>

【讨论】：

【解决方案4】：

我认为您在a 标签中缺少>。

最好在每次条件渲染后使用()，以提高代码可读性。

试试下面的方法：-

    <Fragment>
      <div>{title}</div>
      <div>
        {check1 ? (
          <Fragment>
            <p>Status</p>
            {check2 ? (
              <p>
                <a>desc </a> desc
              </p>
            ) : (
              <a>desc</a>
            )}
          </Fragment>
        ) : (
          <Fragment>
            {check3 ? (
              <p>
                <a>anchor</a>
                desc
              </p>
            ) : (
              <p>
                <a>anchor</a>
                desc
              </p>
            )}
          </Fragment>
        )}
      </div>
    </Fragment>

【讨论】：

【解决方案5】：

如docs中所述

<Fragment>
<div>{title}</div>
<div>
    {check1 ? (
        <p>Status</p>
    ) : check2 ? (
        <p>
            <a>desk</a>
        </p>
    ) : check3 ? (
        <p>
            <a>anchor</a>
        </p>
    ) : (
        <p>
            <a>desc</a>
        </p>
    )}
  </div>
</Fragment>;

【讨论】：

【解决方案6】：

  return (
      <Fragment>
        <div>
          { title }
        </div>
        <div>
         {check1 ?
            <p>
              Status
            </p>
              : //here the mistack
              check2 ? 
              <p>
              <a >
             desc </a> desc
            </p> 
            :
             check3 ?
              <p>
              <a>
                anchor
              </a>
              desc
            </p>
            :
            <p>
            <a 
             anchor
            </a>
            desc
          </p>
          
        }
        </div>
      </Fragment>

错误：使用三元运算符在一个条件后做出反应，它应该是一个单一的视图

复制并害虫它。我认为这对你有用，谢谢。

【讨论】：