jsx怎么往js里传参数_javascript-如何在JSX中添加自定义html属性

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

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

10个解决方案

56 votes

编辑：更新以反映React 16

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

render() {

return (

);

}

有关更多：

[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]

先前的答案(第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的建议启发。)

peterjmag answered 2020-01-24T21:32:34Z

40 votes

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

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

并在render方法中：

Spadar Shut answered 2020-01-24T21:32:59Z

18 votes

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

Luca Fagioli answered 2020-01-24T21:33:19Z

10 votes

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

在这里看到我的助手：堆栈溢出

Christian Steinmann answered 2020-01-24T21:33:43Z

4 votes

尝试将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之前将其包含/导入，它就应该起作用。

rbhalla answered 2020-01-24T21:34:12Z

1 votes

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

var Hello = React.createClass({

componentDidMount: function() {

ReactDOM.findDOMNode(this.test).setAttribute('custom-attribute', 'some value');

},

render: function() {

return

this.test = ref}>Element with a custom attribute

;

}

});

React.render(, document.getElementById('container'));

Facebook的参考文件

Dixon Minnick answered 2020-01-24T21:34:36Z

1 votes

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

//...

alertMessage (cEvent){

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

}

//...

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

render(){

return

//..

Click Me

}

//...

GMK Hussain answered 2020-01-24T21:35:01Z

1 votes

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

Squibly answered 2020-01-24T21:35:20Z

0 votes

根据阻止您执行此操作的确切原因，还有另一个选项不需要更改当前的实现。 您应该能够在项目根目录中使用declare global {或2717305611221468468161文件(不确定哪个)来扩充React。 它看起来像这样：

declare module 'react' {

interface HTMLAttributes extends React.DOMAttributes {

'custom-attribute'?: string; // or 'some-value' | 'another-value'

}

}

另一种可能性是：

declare namespace JSX {

interface IntrinsicElements {

[elemName: string]: any;

}

}

参见JSX | 类型检查

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

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

jedmao answered 2020-01-24T21:35:58Z

0 votes

您可以按以下方式在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');

}

KARTHIKEYAN.A answered 2020-01-24T21:36:18Z