Question

我正在尝试在React组件上添加自定义HTML属性：

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

其中Child是另一个React组件，但是该属性在输出HTML上被剥离。我知道我可以简单地在Child根元素上添加属性，就像这样：

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

或者通过props读取Child组件中的属性，但这不是我想要的，因为它将属性与组件耦合，并且我正在寻找一种更上下文相关的方法（该属性将用于测试自动化目的。）

在React中有一种干净的方法吗？

我也在考虑编写Babel插件以添加属性或防止剥离，但这将是另一个问题。

谢谢！

Answer 1

为此，您可以在react脚本中尝试。

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;

Answer 2

您可以使用以下语法

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

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

Answer 3

React元素不一定与可能具有HTML属性的DOM元素相对应。 React组件可以呈现为多个DOM元素，也可以完全不呈现。

如果Child能够为子DOM元素提供其他道具或属性，则应明确传递它们：

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

通过这种方式，data-custom="foo"将被传递到<div>。

React组件上的自定义HTML属性

3 个答案: