时间戳

首页 > 解决方案 > 是否可以将道具/数据传递给嵌入“纯”HTML 中的 React 组件？

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

问题描述

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

我的计划是从特定于每个 html 页面的文件中读取数据数组

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

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

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

标签： javascripthtmlreactjs

解决方案

你可以使用类似的东西：

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

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

或者，如果您不使用 JSX，则可以使用将数据传递给 ReactElementReact.createElement

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

推荐阅读