Question

我正在用这种方法挠头（应该很容易），但是我正在努力研究如何根据传递的道具有条件地呈现数据属性。

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

<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
 data-slider
 class="flex lg:grid lg:grid-3"
 data-trending
>

谢谢，阿德里安

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

一些笔记

为了“帮助”用户更好地渲染并更新<ul>元素，我们传递了key道具
在函数Array.prototype.map中，第一个参数是项目，第二个参数是数组中的项目索引，请在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

如果您只希望data属性不带任何值，这应该可以解决问题：

<ul data-trending={props.trending ? '' : null} >

Answer 3

在JSX中，属性必须为key-value对，这就是为什么这样的代码是SyntaxError：

<ul
 {props.trending && dataTrending}
/>

----

SyntaxError: Unexpected token, expected "..." (2:3)
  1 | <ul
> 2 |  {props.trending && dataTrending}
    |   ^
  3 | />

以下是一些用于处理组件属性的用例：

const divStyle = {
  style: { width: 200, padding: 5, border: '1px solid black' }
};

const conditionalProps = isTrue ? divStyle : null;

<>
  <div {...divStyle}>Toggle Props</div>

  <div style={value ? { ...divStyle.style } : null}>Toggle Props</div>

  <div {...conditionalProps}>Toggle Props</div>
</>

在您的情况下：

<ul
 dataSlider
 ref={carouselEL}
 className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"}
 dataTrending={props.trending ? {...dataTrending} : null}

 // May cause a bug due to short circuit.
 // dataTrending={props.trending && dataTrending}
/>

// Or
const dataTrendingProp = props.trending ? dataTrending : null;
<ul
 dataSlider
 ref={carouselEL}
 className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"}
  {...dataTrendingProp}
/>

注意：在JSX中，属性should be camelCased，即dataSlider而不是data-slider

“在React中，所有DOM属性和属性（包括事件处理程序）都应被驼峰化。例如，HTML属性tabindex对应于React中的属性tabIndex。”

如何基于React中的道具有条件地呈现数据属性

3 个答案:

一些笔记