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

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

所以我需要根据index显示row元素

我尝试了这样的东西，但它似乎不起作用......

{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 &&。?是三元运算符，因此您需要在它之后使用:。更多关于它的信息 这里.

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