从标准 html 传递道具以反应组件

Posted 2023-03-05

【中文标题】从标准 html 传递道具以反应组件

【英文标题】：passing props to react component from standard html

【发布时间】：2021-11-24 06:57:34

【问题描述】：

所以我想做一些事情，我可以将自定义属性放在 html 元素中，这些属性将被 React 组件作为道具。比如：

function someFunction(props) 
    return <h1>props.something</h1>

HTML：

<div id="someElement" data-something="some text"></div>

渲染：

<h1>some text</h1>

我认为这样的方法可行，但我认为这不是最好的方法

let render_div = document.getElementById("someElement")
render(<someElement something=render_div.getAttribute("data-something")/>, render_div)

我是新手，所以请帮助我:)

PS：我正在使用打字稿

【问题讨论】：

“我认为这不是最好的方法”。不太可能是这样。你想解决什么更高层次的问题？

【参考方案1】：

您在 HTML 元素上设置的每个 data- 属性都可以在 element.dataset 属性中使用。请记住，从破折号样式到驼峰样式的命名转换（请参阅MDN）。

你应该能够做的事情如下：

<div id="root" data-title="title" data-my-text="my-injected-text" />

import ReactDOM from 'react-dom';
import App from './App';

const rootNode = document.getElementById('root');
const props = element.dataset; //  title: 'title', myText: 'my-injected-text' 

ReactDOM.render(App, props, rootNode);

【讨论】：

非常感谢。我现在不能尝试，但我认为它会起作用