如何根据反应中的道具有条件地渲染数据属性

问题描述 投票:-1回答:1

[我正在用这个挠头(应该很容易),但是我正在努力研究如何根据传递的道具有条件地渲染数据属性。

这里是没有额外数据属性的代码片段,但显示了有效的三元运算符

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

有什么想法吗?

谢谢,阿德里安

reactjs gatsby
1个回答
1
投票

为了使用无序列表(<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>

一些注意事项

© www.soinside.com 2019 - 2024. All rights reserved.