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

【问题标题】：get data attribute from “root” DOM node in react js从 React js 中的“根”DOM 节点获取数据属性
【发布时间】：2020-08-29 14:02:07
【问题描述】：

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

我想从 <div> 传递一个属性 data-person-name，id 为 root，以响应元素

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

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

请提出正确的方法。

【问题讨论】：

这个名字应该动态改变吗？
请注意，personName 是 div 元素的无效属性。如果您想向元素添加非 DOM 信息，请使用 data-* attribute（例如，data-person-name）。
恐怕不清楚你在问什么。您可以通过document.getElementById("root") 获取元素，并通过getAttribute("attribute-name-goes-here") 获取其属性值。但这感觉像是一个 X/Y 问题。 为什么你要获取一个属性值并在 React 元素中使用它？
@TJCrowder 我在那个 Div 上渲染一个输入组件，我必须根据某些条件在data-person-name 中发送占位符。所以为此，我需要这样做
对不起，我还是不明白。通常你不会在 React 中使用这样的属性。你会改为通过层次结构传递道具。

【解决方案1】：

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

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

【讨论】：

谢谢@arm，它对我有用，但有没有其他方法可以做到这一点。
如果你想通过数据属性传递personName，我认为没有更好的方法。但是您可以改用 localStorage：在 App.js 中，您可以设置 personName：localStorage.setItem('personName', 'John');，然后在任何地方使用该值：localStorage.getItem('personName');
感谢@arm 的解决方案