时间戳

首页 > 解决方案 > 为嵌套的 if 条件反应条件渲染

javascript - 为嵌套的 if 条件反应条件渲染

问题描述

我想检查多个嵌套条件。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>

标签： javascriptreactjs

解决方案

一个工作版本如下

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

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

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

推荐阅读