React中如何无警告、无冗余代码地使用布尔属性？

开发表格组件时，期望支持开发者在<th>元素上配置start或end属性实现文本对齐，目前两种实现写法存在矛盾：

• 冗余写法：<th start="true">Title</th> 可正常运行，但存在多余代码
• 简写写法：<th start>Title</th> 符合HTML原生布尔属性规范，简洁易读，但React会抛出如下警告：

Warning: Received true for a non-boolean attribute start.
If you want to write it to the DOM, pass a string instead: start="true" or start={value.toString()}.

需要找到一种实现方式，既保留这类布尔属性的简写写法，不触发React警告，也不需要编写冗余的样板代码。

方案1：组件层拦截自定义属性（最推荐） #

不要把自定义的start/end属性直接透传给原生DOM节点，在自定义Th组件层接收属性后，直接转换为对应的样式规则挂载，属性本身不向DOM传递，从根源上避免属性校验警告。
示例实现：

// 自定义表头单元格组件
const TableHeaderCell = ({ start, end, children, ...restProps }) => {
  const cellStyles = {
    textAlign: start ? 'start' : end ? 'end' : 'initial'
  }
  return <th style={cellStyles} {...restProps}>{children}</th>
}

使用时直接写<TableHeaderCell start>标题</TableHeaderCell>即可，完全保留简写的简洁性，没有警告，逻辑也更内聚。

方案2：使用data-*标准自定义属性 #

如果需要配合CSS属性选择器实现样式、必须把属性挂载到DOM节点上，可将自定义属性改为符合HTML规范的data-*前缀格式，React不会对data-*类属性做布尔值校验。
对应CSS规则：

th[data-start] {
  text-align: start;
}
th[data-end] {
  text-align: end;
}

使用时写法为<th data-start>标题</th>，不会触发警告，写法同样简洁，完全符合Web标准。

方案3：透传前做属性值序列化 #

如果一定要保留无前置的start/end属性名挂载到DOM，可在属性透传前做一次序列化处理：当属性值为true时，传入空字符串（符合HTML原生布尔属性的渲染规则，属性存在即代表生效），属性值为false时传undefined不挂载属性。
示例实现：

const TableHeaderCell = ({ start, end, children, ...restProps }) => {
  const domAttributes = {
    ...restProps,
    start: start ? '' : undefined,
    end: end ? '' : undefined
  }
  return <th {...domAttributes}>{children}</th>
}

该方案最终渲染到页面的DOM结构就是标准的<th start>标题</th>格式，和原生布尔属性表现完全一致，也不会触发React的属性校验警告。

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