react中如何根据props有条件地渲染数据属性答案

【问题标题】：How to conditionally render a data attribute based on props in reactreact中如何根据props有条件地渲染数据属性
【发布时间】：2020-02-06 16:37:46
【问题描述】：

我对这个问题摸不着头脑（应该很容易），但我正在努力研究如何根据传递的道具有条件地渲染数据属性。

这里是代码 sn-p 没有额外的数据属性，但显示了一个有效的三元运算符

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

谢谢，阿德里安

【问题讨论】：

对不起，我不明白这个问题，¿你想有条件地给data-slider一个值吗？
哪里出错了？
{props.trending && dataTrending} 所需的输出是什么？
可选属性名称是什么，它的值是什么？
请查看更新后的问题:)

标签： reactjs gatsby

【解决方案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

【讨论】：

OP 询问有条件地生成组件的属性，而不是如何生成子组件。

【解决方案2】：

如果您只想要没有任何值的数据属性，这应该可以解决问题：

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

【讨论】：

【解决方案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 ant 不是 data-slider

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

【讨论】：