Как добавить пользовательские атрибуты html в JSX

Ответ 1

ОБНОВЛЕНИЕ: Обновлено, чтобы отразить Реакт 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

Предыдущий ответ (Реакция 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/ рабочий пример. (Вдохновлено предложением сиранида в этом комментарии.)

Ответ 2

Вы можете добавить атрибут с помощью оператора распространения ES6, например

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

и в методе рендеринга:

<MyComponent {...myAttr} />

Ответ 3

Предположим, вы хотите передать пользовательский атрибут с именем myAttr со значением myValue, это будет работать:

<MyComponent data-myAttr={myValue} />

Ответ 4

Вы можете использовать атрибут ", чтобы отключить белый атрибут атрибута React для элемента.

Смотрите мой андерсер здесь: fooobar.com/questions/188933/...

Ответ 5

Я часто сталкивался с этой проблемой при попытке использовать SVG с ответом.

В итоге я использовал довольно грязное исправление, но полезно знать, что этот вариант существует. Ниже я разрешаю использовать атрибут 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';

Пока это включено/импортировано, прежде чем вы начнете использовать реакцию, оно должно работать.

Ответ 6

В зависимости от того, какую версию React вы используете, вам может понадобиться использовать что-то вроде этого. Я знаю, что Facebook думает об устаревании строк refs в ближайшем будущем.

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

Ответ 7

См. Значение атрибута в консоли при событии click

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

Ответ 8

если вы используете es6, это должно работать:

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

Ответ 9

В зависимости от того, что именно мешает вам сделать это, есть еще один вариант, который не требует изменений в вашей текущей реализации. Вы должны .ts 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 {. Я еще не приземлился на окончательное решение.

См. Также: Как добавить атрибуты к существующим элементам HTML в TypeScript/JSX?

Ответ 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');
  }