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/。（受到this comment中syranide的建议的启发。）

Answer 2

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

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

并在渲染方法中：

<MyComponent {...myAttr} />

Answer 3

考虑您要传递名为myAttr且值为myValue的自定义属性，这将有效：

<MyComponent data-myAttr={myValue} />

Answer 4

您可以使用＆＃34; ＆＃34;用于禁用元素的React属性白名单的属性。

在这里查看我的回复： Stackoverflow

Answer 5

在尝试使用SVG时，我遇到了很多问题。

我最终使用了相当脏的修复程序，但知道存在此选项很有用。下面我允许在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';

只要在开始使用react之前包含/导入它，它就应该有效。

Answer 6

根据您使用的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 7

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

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

简单地添加 customAttribute 作为您在渲染方法中的愿望

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

Answer 8

如果您使用的是es6，这应该可以工作：

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

Answer 9

根据究竟是什么阻止您这样做，还有另一个选项，不需要更改当前的实现。您应该能够在项目中使用.ts或.d.ts文件（不确定哪个）在项目根目录augment React JSX | Type Checking。它看起来像这样：

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

请参阅How do I add attributes to existing HTML elements in TypeScript/JSX?

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

另请参阅：destructuring assignment

Answer 10

您可以按照以下方式在 componentDidMount() 生命周期方法中进行操作

componentDidMount(){
    const buttonElement = document.querySelector(".rsc-submit-button");
    const inputElement = document.querySelector(".rsc-input");
    buttonElement.setAttribute('aria-hidden', 'true');
    inputElement.setAttribute('aria-label', 'input');
  }

Answer 11

uniqueId是自定义属性。

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

Answer 12

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

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

12 个答案:

编辑：更新以反映React 16

以前的答案（React 15及更早版本）