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

Question

所以我想做一些事情，我可以将自定义属性放在 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：我正在使用打字稿

Answer 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);