时间戳

首页 > 解决方案 > 根据条件有条件地更改同一级别的 HTML 标记

reactjs - 根据条件有条件地更改同一级别的 HTML 标记

问题描述

我有这段代码

const route="";
return (
    <Link to={route}>
     </p>{route?'click':'No click'}
    </Link>
  )

我希望如果route变量包含某些内容，我想<Link>将 括起来<p>，否则我想<>关闭它。例子：

const route="/home";
return (
    <Link to="/home">
      <p>click</p>
    </Link>
  )

const route="";
return (
    <>
     <p>No click</p>
    </>
  )

我怎样才能做到这一点？

我在想这样的事情，但我知道这没有意义。

{route && <Link>
  <p> 
</Link>}

注意：p标签是一个例子，我可以有很多组件，所以我的想法是不要重复代码。

    <Link to="/home">
      <ComponentA/>
      <ComponentB/>
      <ComponentC styles{mystyles}/>
      {var && <ComponentD/>}
      <ComponentE/>
      <ComponentF/>
    </Link>

标签： reactjs

解决方案

你在正确的轨道上。最简单的方法是

{route === something ? (
  <Link><p>Click</p></Link>
) : (
  <p>No Click</p>
)}

如果你有很多内容并且真的想走 DRY 路线，你总是可以创建一个帮助函数来返回内容，如下所示：

const getContent = hasRoute => <p>{hasRoute ? 'Click' : 'No click'}</p>
const hasRoute = !!route
{hasRoute ? <Link>{getContent(hasRoute)}</Link> : getContent(hasRoute)}

最后，为了最大程度的可重用性，我想你可以<NoLink>在普通段落周围创建一个包装元素，并动态地将<Container>别名设置为<Link>or <NoLink>，它应该可以正常工作：

const isLink = !!route
const NoLink = ({children}) => <p>{children}</p>
const Content = isLink ? Link : NoLink
return (
  <Content>
    {isLink ? 'Click' : 'No Link'}
  </Content>
)

就个人而言，如果它只是少量的内容，我会采用第一种方法来降低代码复杂性，因为第 2 种和第 3 种添加了不必要的大量心理漏洞来理解你在做什么。并且仅对大量内容才有意义。

另外，请记住，当您在示例中仅返回单个 childlike 时，<></>您添加的片段 ( )什么也不做。仅当您返回一个以上的孩子时才需要。

推荐阅读