这背后有不同的原因，但我想知道如何简单地将自定义属性添加到 JSX 中的元素？
【问题讨论】：
aria-modal=true，您将更改（为 false）推送到 aria/data 属性的存储区，但没有其他任何更改（例如组件的内容或类或变量） ) 结果 ReactJs 不会更新该组件中的 aria/data attrs。我一直在搞砸一整天才意识到这一点。
标签： javascript html node.js reactjs react-component
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
目前不支持自定义属性。有关更多信息，请参阅此未决问题：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/。 （灵感来自 syranide 在this comment 中的建议。）
【讨论】：
data- 或aria- 来添加自定义属性。请参阅Luca's answer 和/或React Docs
我在尝试使用 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 属性白名单。
在此处查看我的答案： Stackoverflow
【讨论】：
根据您使用的 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'));
【讨论】：
您可以使用 ES6 扩展运算符添加属性，例如
let myAttr = {'data-attr': 'value'}
在渲染方法中：
<MyComponent {...myAttr} />
【讨论】：
let myAttr = {'custom-attr': 'value'} 会起作用吗？
data- 预先修复。
假设您想传递一个名为 myAttr 的自定义属性，其值为 myValue，这将起作用：
<MyComponent data-myAttr={myValue} />
【讨论】：
15.3.1 进行了测试，所以你的downvote 没有任何意义，因为你抱怨它不适用于15.5.4。其次，我刚刚用^15.6.1 对其进行了测试，它工作得很好。仔细检查您的代码。
react-dom 而不是react。对不起，我的错:)。
data- 或 aria-。另见：facebook.github.io/react/docs/dom-elements.html
根据阻止您执行此操作的确切原因，还有另一个选项不需要更改您当前的实现。您应该能够在您的项目中使用.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;
}
}
您甚至可能必须将其包装在 declare global { 中。我还没有找到最终的解决方案。
另见：How do I add attributes to existing HTML elements in TypeScript/JSX?
【讨论】：
点击事件在控制台中查看属性值
//...
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>
}
//...
【讨论】：
如果你使用的是 es6，这应该可以工作：
<input {...{ "customattribute": "somevalue" }} />
【讨论】：
uniqueId 是自定义属性。
<a {...{ "uniqueId": `${item.File.UniqueId}` }} href={item.File.ServerRelativeUrl} target='_blank'>{item.File.Name}</a>
【讨论】：
对于任何自定义属性，我使用 react-any-attr 包 https://www.npmjs.com/package/react-any-attr
【讨论】：