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

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

EDIT:Updated以反映React 16 React 16本机支持自定义属性。这意味着将自定义属性添加到元素现在与将其添加到

render

函数一样简单，如下所示：

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

---

有关工作示例，请参见。（受syranide在中的建议启发。）

在尝试将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';

只要在开始使用react之前包含/导入该属性，它就应该可以工作。

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

在这里查看我的anwser：

---

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

var Hello=React.createClass({
componentDidMount:function（）{
ReactDOM.findDOMNode（this.test）.setAttribute（'custom-attribute'，'somevalue'）；
},
render:function（）{
返回
具有自定义属性的this.test=ref}>元素
;
}
});
React.render（，document.getElementById（'container'）；

---

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

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

在渲染方法中：

<MyComponent {...myAttr} />

---

考虑到您想要传递一个名为

myAttr

的自定义属性，该属性的值为

myValue

，这将起作用：

<MyComponent data-myAttr={myValue} />

---

根据阻止您这样做的具体原因，还有一个选项不需要更改当前的实现。您应该能够在项目根目录下使用

.ts

或

.d.ts

文件（不确定是哪个文件）在项目中添加。它看起来像这样：

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

看

您甚至可能需要将其包装在

声明全局{

中。我还没有找到最终的解决方案

---

另请参见：

请参见控制台中的单击事件属性值

//...
   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>
        }
//...

render（）{
返回
//..
点击我
}
//...

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

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

---

uniqueId是自定义属性

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

---

对于任何自定义属性，我使用react any attr包

---

是的，我想只有这样。虽然我是一个总反应n00b，但如果这是一个愚蠢的问题，很抱歉，但为什么不在ref回调中添加所有自定义属性呢？例如：ref={（thisvgelement）=>{thisvgelement.setAttribute（'xmlns:xlink'，'）；}@k7n4n5t3w4rt是的，这应该也行。我写这个答案时，Ref回调不存在。这不完全是真的。你可以通过在自定义属性前面加上

数据-

或

aria-

来添加它。请参阅和/或为什么不能对组件执行此操作，以便属性将在渲染中的第一个元素上渲染？中我来看看你觉得这

让myAttr={'custom-attr'：'value'}

可以吗？如果您的项目中有ES6 transpiler，它确实可以工作。好的，这里有一个。我没有看到自定义属性there@AndreyBorisko-我想提到但没有提到，无效的html属性和自定义属性目前无法工作，除非通过

数据-

预先修复。我认为这个答案是误导性的，因为问题是s特定于自定义属性，@peterjmag提出的解决方案是正确的。@GusDeCool首先声明它是用react

15.3.1

测试的，因此您的否决票没有任何意义，因为您抱怨它不能与

15.5.4

一起使用。其次，我刚刚用

^15.6.1

对它进行了测试工作正常。请仔细检查您的代码。啊，我知道，它是在

react dom

上，而不是

react

。对不起，我的错：）。这是正确的答案。您可以通过在自定义属性前面加上

data-

或

aria-

来添加它们。另请参见：react 16和on这感觉像是最符合HTML5的答案可能是一条注释help某人，我发现React 16.7不会重新加载和更新组件的html属性，如果您只在存储区（f.e.redux）中更改它们并绑定到组件。这意味着组件具有f.e.

aria modal=true

，您将更改（为false）推送到aria/数据属性的存储区，但不会更改任何其他内容（例如组件的内容或类或其中的变量）作为结果，ReactJs不会更新该组件中的aria/数据属性。我花了一整天的时间才意识到这一点。你的天才！谢谢。太棒了，谢谢！

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

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