Пользовательские атрибуты HTML в компоненте React - PullRequest
Новая
       2

Пользовательские атрибуты HTML в компоненте React

0 голосов
/ 10 апреля 2019

Я пытаюсь добавить пользовательский атрибут HTML в компонент React: 

const Parent = () => (
    <div className="parent">
      <Child data-custom="foo" />
    </div>
);

Где Child - другой компонент React, но атрибут удаляется в выходном HTML.Я знаю, что я мог бы просто добавить атрибут в корневой элемент Child, например, так: 

 const Child = () => <div className="child" data-custom="foo" />

Или прочитать атрибут в компоненте Child через реквизит, но это не то, что я ищу с тех порбудет связывать атрибут с компонентом, и я ищу более контекстный подход (атрибут будет использоваться для целей автоматизации тестирования).

Есть ли чистый способ сделать это в React?

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

Спасибо!

Ответы [ 3 ]

0 голосов
/ 10 апреля 2019

Вы можете использовать следующий синтаксис 

const Parent = () => (
    <div className="parent">
      <Child data-custom="foo"/>
    </div>
);

const Child = ({...props}) => (<div className="child" {...props} />)
0 голосов
/ 10 апреля 2019

Элемент React не обязательно соответствует элементу DOM, который может иметь атрибуты HTML. Компонент React может быть визуализирован для нескольких элементов DOM или вообще без элементов.

Если Child должен предоставить дополнительные реквизиты или атрибуты дочернему элементу DOM, он должен передать их явно: 

const Child = props => <div className="child" {...props} />

Таким образом data-custom="foo" будет передано <div>.

0 голосов
/ 10 апреля 2019

Для этого вы можете попробовать это в своем скрипте реакции. 

const MyCompo = () => {
	return (
		<div>
			<p>HTML Code</p>
		</div>
	);
}
export default About;

В противном случае вы можете создать класс, а затем определить компоненты и экспортировать их. 

import React from 'react';

import '../assets/css/style.css';
import '../assets/css/pure-min.css';
import '../assets/css/custom.css';
import 'font-awesome/css/font-awesome.min.css';
import $ from 'jquery';

class FirstScreen extends React.Component {
	constructor(props) {
	    super(props);
	   	this.handleLoad = this.handleLoad.bind(this);
	}
	componentDidMount() {
		window.addEventListener('load', this.handleLoad);
	}
	handleLoad() {
		
 	}

	render() {
		return <div>HTML Code</div>;
	}
}

export default FirstScreen;
...