React 组件上的自定义 HTML 属性答案

【问题标题】：Custom HTML attributes on React componentReact 组件上的自定义 HTML 属性
【发布时间】：2019-04-10 20:46:28
【问题描述】：

我正在尝试在 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 插件来添加属性或防止剥离，但这将是另一个问题。

谢谢！

【问题讨论】：

dublicate
@Ardit 相关但一定是骗子，因为情况不同。

标签： html reactjs babeljs

【解决方案1】：

React 元素不一定对应可能具有 HTML 属性的 DOM 元素。 React 组件可以渲染为多个 DOM 元素，也可以不渲染任何元素。

如果Child 应该能够为子 DOM 元素提供额外的道具或属性，它应该显式地传递它们：

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

这样data-custom="foo" 将被传递给<div>。

【讨论】：

我对 React 很陌生，不知道 React 组件可以渲染为没有 DOM 元素。此解决方案有效！谢谢！我会坚持下去，尽管我试图避免显式管理每个组件内的道具。也许是一个钩子或一个 babel 插件？
我不知道有任何帮助器，这会很棘手，因为它需要挂钩到 React 渲染器来执行此操作。而且，如果组件返回的不是 DOM 元素而是其他东西，它应该如何工作仍然不清楚。例如。 Child 返回具有多个孩子的 Fragment。它应该丢弃数据属性还是将其提供给所有孩子？ FWIW，在 react-testing-library 使用的 data-testid 属性上有一个约定，请参阅 testing-library.com/docs/dom-testing-library/… 。该属性应该在重要元素上手动设置。

【解决方案2】：

为此，您可以在您的反应脚本中尝试此操作。

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;

【讨论】：

【解决方案3】：

你可以使用下面的语法

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

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

【讨论】：