如何在 JSX 中添加自定义 html 属性

Question

背后有不同的原因，但我想知道如何简单地向 JSX 中的元素添加自定义属性？

Answer 1

编辑：更新以反映 React 16

React 16 原生支持自定义属性。这意味着向元素添加自定义属性现在就像将其添加到 render 函数一样简单，如下所示：

render() {
  return (
    <div custom-attribute="some-value" />
  );
}

更多：
https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes
https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

上一个答案（React 15 及更早版本）

目前不支持自定义属性。有关详细信息，请参阅此未解决的问题：https://github.com/facebook/react/issues/140

作为解决方法，您可以在 componentDidMount 中执行类似的操作：

componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}

参见 https://jsfiddle.net/peterjmag/kysymow0/ for a working example. (Inspired by syranide's suggestion in this comment。）

Answer 2

在尝试将 SVG 与 React 结合使用时，我运行经常遇到这个问题。

我最终使用了一个非常脏的修复程序，但了解此选项的存在很有用。下面我允许在 SVG 元素上使用 vector-effect 属性。

import SVGDOMPropertyConfig from 'react/lib/SVGDOMPropertyConfig.js';
import DOMProperty from 'react/lib/DOMProperty.js';

SVGDOMPropertyConfig.Properties.vectorEffect = DOMProperty.injection.MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.DOMAttributeNames.vectorEffect = 'vector-effect';

只要这是 included/imported 在您开始使用 React 之前，它就应该可以工作。

Answer 3

您可以使用“is”属性来禁用元素的 React 属性白名单。

在这里查看我的答案： Whosebug

Answer 4

根据您使用的 React 版本，您可能需要使用类似这样的东西。我知道 Facebook 正在考虑在不久的将来弃用字符串引用。

var Hello = React.createClass({
    componentDidMount: function() {
        ReactDOM.findDOMNode(this.test).setAttribute('custom-attribute', 'some value');
    },
    render: function() {
        return <div>
            <span ref={(ref) => this.test = ref}>Element with a custom attribute</span>
        </div>;
    }
});

React.render(<Hello />, document.getElementById('container'));

Facebook's ref documentation

Answer 5

您可以使用 ES6 扩展运算符添加属性，例如

let myAttr = {'data-attr': 'value'}

在渲染方法中：

<MyComponent {...myAttr} />

Answer 6

考虑到您想要传递一个名为 myAttr 且值为 myValue 的自定义属性，这将起作用：

<MyComponent data-myAttr={myValue} />

Answer 7

根据阻止您执行此操作的确切原因，还有另一个选项不需要更改您当前的实施。您应该能够在项目根目录下使用 .ts 或 .d.ts 文件（不确定是哪个）在您的项目中 augment React。它看起来像这样：

declare module 'react' {
    interface HTMLAttributes<T> extends React.DOMAttributes<T> {
        'custom-attribute'?: string; // or 'some-value' | 'another-value'
    }
}

另一种可能是：

declare namespace JSX {
    interface IntrinsicElements {
        [elemName: string]: any;
    }
}

见JSX | Type Checking

您甚至可能需要将其包装在 declare global { 中。我还没有找到最终解决方案。

另请参阅：

Answer 8

单击事件时在控制台中查看属性值

//...
   alertMessage (cEvent){
           console.log(cEvent.target.getAttribute('customEvent')); /*display attribute value */
        }
//...

简单地在 render 方法中添加 customAttribute

render(){
    return <div>
//..
    <button customAttribute="My Custom Event Message" onClick={this.alertMessage.bind(this) } >Click Me</button>
            </div>
        }
//...

Answer 9

如果您使用的是 es6，这应该有效：

<input {...{ "customattribute": "somevalue" }} />

Answer 10

uniqueId 是自定义属性。

<a {...{ "uniqueId": `${item.File.UniqueId}` }}  href={item.File.ServerRelativeUrl} target='_blank'>{item.File.Name}</a>

Answer 11

对于任何自定义属性，我使用 react-any-attr 包 https://www.npmjs.com/package/react-any-attr

如何在 JSX 中添加自定义 html 属性

How to add custom html attributes in JSX

html

javascript

node.js

reactjs

react-component

编辑：更新以反映 React 16

上一个答案（React 15 及更早版本）