React中如何根据Props条件渲染Data属性？

嘿Adrian，我懂你这种“明明应该很简单却卡壳”的感觉！你之前的写法报错，是因为React里条件渲染HTML属性的方式和你想的不一样，咱们一步步来解决：

问题根源 #

你写的{props.trending && dataTrending}这种写法有问题：如果dataTrending是类似'data-trending'的字符串，React会把它当成子元素来渲染，而不是HTML属性，这就会导致语法错误；就算是对象，这种写法也不符合React的属性绑定规则。

两种可行的解决方案 #

方案1：直接条件绑定属性值 #

React会自动忽略值为undefined或false的属性，所以我们可以直接给data-trending属性赋值：

<ul 
  data-slider 
  ref={carouselEL} 
  className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"} 
  data-trending={props.trending ? true : undefined}
>

当props.trending为true时，data-trending会被渲染成无值的属性（和你期望的<ul ... data-trending >一致）；当为false时，这个属性会被React自动忽略。

方案2：使用展开运算符 #

如果需要条件渲染多个属性，这种方式更灵活：

<ul 
  data-slider 
  ref={carouselEL} 
  className={props.trending ? "flex lg:grid lg:grid-3" : "flex transition lg:w-full"} 
  {...(props.trending ? { 'data-trending': true } : {})}
>

原理是当条件为真时，展开包含data-trending属性的对象；条件为假时展开空对象，相当于不添加任何额外属性。

验证结果 #

两种方案都能实现你想要的效果：

• 当props.trending = true时，渲染出：

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

• 当props.trending = false时，data-trending属性不会出现在最终的HTML里，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Adi