ReactJS：将 html 文件转换为 React 组件

Posted 2023-02-22

【中文标题】ReactJS：将 html 文件转换为 React 组件

【英文标题】：ReactJS: converting html files into React components

【发布时间】：2017-01-06 11:43:03

【问题描述】：

假设我有具有不同表单数据的 Test1.html,Test2.html, Test3.html ...etc 文件。我想生成具有完整信息的 reactJS 组件，例如 Test1.js、Test2.js、Test3.js 组件。

我们有一个通用的 reactjs 插件的想法，可以将任何 html 文件作为输入并自动转换 react 组件。作为开发人员，无需编写单独的代码来将自己的组件从 html 文件转换。我只是想把它做成插件

只需上传 html 文件作为输入，生成带有完整数据的 reactjs 组件。

make it .html 文件被输入并 预期输出是反应组件。

请让我知道如何做到这一点会很棒????

【问题讨论】：

这在完全由 HTML 元素组成的“愚蠢”表示组件的完全微不足道的情况下是可能的，但除此之外的任何事情都将非常困难。听起来你在这里要求一些神奇的东西。

让我澄清一下这个 var htmlInput = '

【参考方案1】：

这不是一个好主意。我不知道您是否需要在您的反应组件中执行一些带有状态的操作，或者只需要 html。如果你只需要在 render() 中有 html，你可以这样做：

componentWillMount() 
    // get your data from html
    ...
    this.data = your_data;


render() 
    return (
        <div dangerouslySetInnerHTML=__html: this.data></div>
    );

但同样，不推荐！

【讨论】：

是的，你说的对，但是我想做一个通用的插件，每个人都想重用它来转换他们自己的组件。 reactjs 纯粹基于组件。所以这里将html文件制作成组件。

您可以基于npmjs.com/package/html-to-react-components。试一试。

能否提供以上代码的下载链接。

如果你使用 npm：npm install html-to-react-components。或者这是 github 链接：github.com/roman01la/html-to-react-components