Question

我需要对一个非常老的学校网站进行一些更新。当前，布局是基于表格的并手工编码的。我的想法是使用React消除一些重复编码，特别是遍历数据数组并使用JSX构造表行。我看到可以在此处将React组件嵌入HTML中了https://reactjs.org/docs/add-react-to-a-website.html，但是我不确定如何使这些组件可重用，也就是说，我不确定如何将prop从HTML文件。

我的计划是从每个html页面专用的文件中读取数据数组

<script type="text/javascript" src="data_page_x.js"></script>

然后将其传递给组件，该组件将其作为道具读取，然后吐出表行。

这可能吗？有更好的方法吗？

Answer 1

您可以使用类似的内容：

const initialData = document.getElementById('initial-data').textContent; 

ReactDOM.render(
  <MyReactElement initialData={JSON.parse(initialData)} />,
  document.getElementById('root')
);

或者，如果您不使用JSX，则可以使用React.createElement

将数据传递到ReactElement

https://reactjs.org/docs/react-api.html#createelement

https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js

使用React.createElement

传递数据

 const domContainer = document.querySelector('#like_button_container'); 
 const e = React.createElement;
 ReactDOM.render(
   e(
    LikeButton,
    {initialData: JSON.parse(initialData)}
  ), domContainer);

是否可以将道具/数据传递给嵌入在“纯” HTML中的React组件？

1 个答案: