從 HTML 頁面將數據傳遞到 React 組件？

Question

我有一個這樣的 React 應用程序：

索引.html：

<div class="asset_infos" data-keyID="msg_1"></div>
<div class="asset_infos" data-keyID="msg_2"></div>
...
<div class="asset_infos" data-keyID="msg_n"></div>

和 index.js：

var Msg = props => (
    <div>It is { props.keyID }</div>
);

document.querySelectorAll('.asset_infos')
  .forEach(domContainer => {
    ReactDOM.render(<Msg {...(domContainer.dataset)} />,
      domContainer
    );
  });

我希望將每個 < div > 的 data-keyID 屬性中的數據傳輸到 Msg 變量並進行顯示，但事實並非如此。 你知道怎么做嗎？

Answer 1

你可以像下面這樣傳遞道具。 請參閱演示https://jsfiddle.net/uveh5d48/1/

document.querySelectorAll('.asset_infos')
.forEach(domContainer => {
   ReactDOM.render(<Msg keyID = {domContainer.dataset.keyid} />,
     domContainer
   );
});