如何在react中基于属性有条件地呈现数据属性

Question

这一点让我摸不着头脑(应该很容易)，但我正在努力弄清楚如何根据传递的属性有条件地呈现数据属性。

下面的代码片段没有额外的data属性，但显示了一个有效的三元运算符

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

有什么想法吗？

要确认数据趋势为true的轮播的所需输出，应为

<ul
 data-slider
 class="flex lg:grid lg:grid-3"
 data-trending
>

谢谢，艾利安

Answer 1

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

Answer 2

为了使用无序列表(<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第一个参数是项目，第二个参数是数组中的项目索引，更多信息请阅读此处：Array.prototype.map

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中的，attributes should be camelCased，即dataSlider ant not data-slider

“在React中，所有DOM属性和属性(包括事件处理程序)都应为tabindex。例如，HTML属性camelCased对应于React中的属性tabIndex。”