从 React js 中的“根”DOM 节点获取数据属性

Question

假设在 HTML 文件中某处有一个<div> ：

我想从具有 id root的<div>传递一个属性data-person-name来反应元素

<div id="root" data-person-name="John"></div>

const element = <h1>Hello,{data-person-name}</h1>;
ReactDOM.render(element, document.getElementById('root'));

请提出正确的方法来做到这一点。

Answer 1

一种更简洁的方法是在所有自定义属性前面加上“data-”。 因为 div 元素没有已知的属性“personName”并且违反 W3 规则。 代码可能如下所示：

<div id="root" data-personName="John"></div>
const element = <h1>Hello,{document.getElementById('root').getAttribute('data-personName')}</h1>;