[我正在用这个挠头(应该很容易),但是我正在努力研究如何根据传递的道具有条件地渲染数据属性。
这里是没有额外数据属性的代码片段,但显示了有效的三元运算符
<ul
data-slider
ref={carouselEL}
className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"}
>
这里是带有附加数据属性的示例,但是代码的最底行抛出错误并且不起作用。
<ul
data-slider
ref={carouselEL}
className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"}
{props.trending && dataTrending}
>
有什么想法吗?
谢谢,阿德里安
为了使用无序列表(<ul>
元素,您必须为每个条目生成列表项(<li>
元素),如下所示:
<ul
data-slider
ref={carouselEL}
className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"}
>
{props.trending ? dataTrending.map((item, index) => <li key={index}>{item}</li> : null}
</ul>
<ul>
元素,我们传递了key
属性Array.prototype.map
中,第一个参数是项目,第二个参数是数组中的项目索引,在此处了解更多:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map