Реагировать на атрибут передачи данных в DOM

Question

Я расширяю компонент и хочу добавить к нему дополнительные атрибуты.Чтобы добавить новый атрибут класса, который я использую:

extraProps.className = 'some-value';

или идентификатор ...

extraProps.ID = 'some-value';

, но как я могу добавить атрибут данных?Например, data-my-attribute

Я попробовал соглашение CamelCase:

extraProps.dataMyAttribute = 'some-value';

... но оно не добавляет черточки в выведенный HTML.Он выводит dataMyAttribute='some-value'

Полный код:

function addMyProp( extraProps, props ) {

    extraProps.dataSomeAttribute = 'something' // it doesn't add the data- prefix

    return extraProps;
}

Answer 1

Из официальной документации : * В React все свойства и атрибуты DOM (включая обработчики событий) должны быть camelCased.Например, атрибут HTML tabindex соответствует атрибуту tabIndex в React.Исключение составляют aria-* и data-* атрибуты, которые должны быть в нижнем регистре.Например, вы можете оставить aria-label как aria-label.*

, поэтому вы должны использовать именование атрибутов для пользовательского свойства, такого как это:

extraProps['data-my-attribute'] = 'something';

Answer 2

Для атрибутов данных реагировать не требуется регистр верблюда .

Вы пробовали extraProps['data-my-attribute'] = 'something'?