如何转换 html 模板以做出react?

IT技术 reactjs mern
2021-04-25 09:01:22

我从 themeforest ( https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?s_rank=1 )购买了一个 HTML 管理模板

我正在构建一个 MERN 堆栈站点,想知道将这个 HTML 模板转换为 React 站点的最佳方法是什么。将模板分解为组件、手动添加路由以及将 HTML 转换为 JSX 等似乎是一项乏味的任务。

问题出现是因为在 themeforest 中,最流行的管理模板是为 jQuery / HTML 世界构建的,而不是为全栈 JS 世界构建的。例如,我上面链接的主题有大约 7000 次下载。这些模板在购买时会给你一大堆 HTML 和 CSS,如果我们必须用这些来构建一个 React 站点,那么手动将 HTML 转换为 JSX,并将其分解为组件,是一个费力的过程。想知道是否有更好的方法来解决这个问题。

3个回答

您可以使用html-to-react-components

更好的方法是将您的 html 转换为 jsx 并在您的 react-component 中使用。您可以在此处将 html 转换为 jsx

您可以使用:

  1. html-to-react
  2. wix/react模板

但是,从长远来看,最好将这些模板拆分为一组具有明确定义的角色的细粒度组件。

在 React 的情况下,你可以在 React Component 中使用 HTML、CSS 和 Javascript 作为 JSX 格式。但是如果你想在React Native 中使用 HTML、CSS 和 Javascript那么你需要使用“WevView”组件。您可以使用“WebView”在 React Native 中显示任何 HTML 元素。您可以看到 WebView 组件的一个简单示例