React 15中如何创建自定义属性及为<div variant="variant1"/>添加自定义属性？

1. 如何在React 15版本中创建自定义属性？ #

React 15对原生HTML元素的属性有严格过滤规则——非标准HTML属性会被自动忽略，得根据元素类型分情况处理：

• 自定义组件上的自定义属性：
  操作很直接，直接在自定义组件上添加任意属性，然后在组件内部通过props接收就行。示例：

  // 自定义组件
  function MyComponent(props) {
    return <div>我的自定义属性值：{props.myCustomProp}</div>;
  }
  
  // 使用组件时传递自定义属性
  <MyComponent myCustomProp="hello-react-15" />
  

• 原生HTML元素上的自定义属性：
  有两种常用方案：

  • 方案一：用data-*前缀的属性（HTML标准允许的自定义属性方式），React 15会正常渲染这类属性。比如：

    <div data-my-custom="some-value" data-another="another-value" />
    

    渲染后的HTML会保留这些属性，你可以通过element.dataset.myCustom获取对应值。
  • 方案二：如果必须用不带data-前缀的非标准属性，要么用dangerouslySetInnerHTML直接渲染HTML字符串，要么在组件挂载后手动设置属性：
    用dangerouslySetInnerHTML的示例：

    <div dangerouslySetInnerHTML={{ __html: '<div custom-prop="direct-value"></div>' }} />
    

    组件挂载后手动设置的示例：

    class CustomDiv extends React.Component {
      componentDidMount() {
        this.el.setAttribute('custom-prop', this.props.customValue);
      }
      render() {
        return <div ref={el => this.el = el} />;
      }
    }
    
    <CustomDiv customValue="manual-set" />
    

2. 如何在React 15版本中为代码片段<div variant="variant1"/>添加自定义属性？ #

针对这个具体的<div>元素，遵循同样的规则：

• 如果可以用data-前缀，直接添加即可（注意：原生<div>上的variant是非标准属性，React 15会忽略它，所以如果要保留variant，也需要按规则处理）：

  <div data-variant="variant1" data-custom-attr="my-custom-value" />
  

  要是必须保留不带前缀的variant，可以用组件挂载后手动设置的方式：

  class VariantDiv extends React.Component {
    componentDidMount() {
      this.el.setAttribute('variant', this.props.variant);
      this.el.setAttribute('custom-attr', this.props.customAttr);
    }
    render() {
      return <div ref={el => this.el = el} />;
    }
  }
  
  <VariantDiv variant="variant1" customAttr="added-value" />
  

• 如果必须一次性保留不带前缀的variant和其他自定义属性，也可以用dangerouslySetInnerHTML渲染：

  <div dangerouslySetInnerHTML={{ __html: '<div variant="variant1" custom-attr="added-value"></div>' }} />
  

小提醒：dangerouslySetInnerHTML要谨慎使用，可能存在XSS风险，优先选择data-*属性或组件挂载后手动设置的方式。

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