Question

我正在创建元素网格，并且需要根据要呈现的元素的索引添加行元素。所以我有这样的东西：

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">'}

Answer 1

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

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

还要注意如何将data ?替换为data &&。 ?是三元运算符，因此在其后需要一个:。 More about it here.

Answer 2

 return (
    data ? data.map((item, index) => (
            <div className="wrapper">
             <div className="row">
              <div className="col">Title</div>
             </div>
            </div>
          ) : <h2>Sorry data Not available</h2>
        )

根据ReactJS中的函数返回显示内容

2 个答案: