时间戳

首页 > 解决方案 > 在 ReactJS 中根据函数返回显示内容

javascript - 在 ReactJS 中根据函数返回显示内容

问题描述

我正在创建一个元素网格，需要根据正在呈现的元素的索引添加一个行元素。所以我有这样的事情：

const checkIndex = (index) => {
  ...
  //return either true or false
}

return (

  data ? data.map((item, index) => (

    <div className="wrapper">
     <div className="row">
      <div className="col">Title</div>
     </div>
    </div>

  )
)

所以我需要row根据index

我尝试过这样的事情，但它似乎不起作用......

{checkIndex(index) ? '<div className="row">' : ''}
{checkIndex(index) && '<div className="row">'}

标签： javascriptreactjs

解决方案

它不起作用，因为您使用的是元素的字符串表示形式，而不是实际元素。

return (
  data && data.map((item, index) => (
    <div className="wrapper">
     {checkIndex(index) && (
       <div className="row">
         <div className="col">Title</div>
       </div>
     )}
    </div>
  )
)

另请注意我如何替换data ?为data &&. ?是三元运算符，所以你需要:在它之后。更多关于它在这里。

推荐阅读