從標准 html 傳遞道具以反應組件

Question

所以我想實現一種我可以將自定義屬性放在 HTML 元素中的東西，這些元素將被反應組件視為道具。 就像是：

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：我用的是typescript

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