77

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

4

11 回答 11

79

编辑：更新以反映 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/ 。（受此评论中 syranide 建议的启发。）

于 2015-07-07T15:50:14.843 回答
51

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

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

在渲染方法中：

<MyComponent {...myAttr} />
于 2016-11-08T14:02:11.090 回答
24

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

<MyComponent data-myAttr={myValue} />
于 2017-06-15T13:36:42.270 回答
10

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

在这里查看我的答案： Stackoverflow

于 2015-11-22T22:18:15.400 回答
8

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

<input {...{ "customattribute": "somevalue" }} />
于 2019-08-20T02:07:56.000 回答
4

在尝试将 SVG 与 react 一起使用时，我经常遇到这个问题。

我最终使用了一个相当肮脏的修复程序，但知道这个选项的存在很有用。下面我允许vector-effect在 SVG 元素上使用该属性。

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 之前包含/导入它，它应该可以工作。

于 2015-07-08T18:43:25.967 回答
2

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

//...
   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>
        }
//...
于 2018-06-26T07:40:25.887 回答
1

根据您使用的 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 的参考文档

于 2016-09-07T17:37:09.463 回答
0

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

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 | 类型检查

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

另请参阅：如何向 TypeScript/JSX 中的现有 HTML 元素添加属性？

于 2018-02-15T23:36:14.330 回答
0

uniqueId 是自定义属性。

<a {...{ "uniqueId": `${item.File.UniqueId}` }}  href={item.File.ServerRelativeUrl} target='_blank'>{item.File.Name}</a>
于 2020-05-18T12:48:32.753 回答
0

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

于 2020-12-29T06:11:10.517 回答