【问题标题】:Looking to integrate free templates from 'https://startbootstrap.com/' into my react app希望将来自“https://startbootstrap.com/”的免费模板集成到我的反应应用程序中
【发布时间】:2019-11-02 06:36:03
【问题描述】:

我想下载一个免费的引导程序templates 并将所述模板添加到我的反应应用程序中。我尝试阅读一些文档,但找不到任何有关将这些免费模板与 react 集成的文档。

我为我喜欢的模板做了一个npm install,但我不确定下一步该做什么。我的 node_modules 目录中只有模板。

我将模板中 html 文件正文中的内容放入我的app.js 的返回中。添加了 css 和 vendor 文件夹。然后我尝试将模板 css 文件导入我的app.js 并更改我的index.html 文件中需要的内容。其中一些奏效了。其他部分没有。

只是想将这些漂亮的模板正确地集成到我的 React 项目中。

任何帮助将不胜感激!

【问题讨论】:

    标签: reactjs bootstrap-4 react-bootstrap reactstrap


    【解决方案1】:

    问题是这些templates 在构建时考虑了 Bootstrap 不是 React。这些模板是使用常规 HTML、CSS、JS、jQuery 等创建的。对于 React 应用程序来说,这些模板不能开箱即用。因此,为了使这些模板之一能够工作,在 React 的上下文中,人们将手动更改所述模板的许多部分。

    例如,除了获取 React 应用程序所需的模板片段之外,还必须更改模板提供的 HTML 页面中列出的许多属性。这是因为在 React 中您不能使用为 JSX 中的 JavaScript 保留的关键字

    那么这是什么意思呢?

    您必须将 HTML 中的 class 属性更改为 className,您的 CSS 样式规则才能在模板中生效。 onchange 变成 onChangeonsubmit 变成 onSubmit,等等……

    标准是在 JSX 中 camelCase 保留的 JavaScript 关键字

    你绝对可以让这个模板在 React 中工作,它只需要一些手动调整。但是,如果您希望模板能够开箱即用地为 React 工作,我会考虑使用 React 构建的免费模板。

    希望对您有所帮助!

    【讨论】:

    • 啊,看来我忽略了那部分。让我试试看。谢谢!
    • np 很高兴它有帮助,如果您觉得有用,请考虑接受我的回答
    • 我把class改成了className等属性。但是还是不行。我认为 import 和
    • 你有没有尝试过合并它?
    • 会有很多问题。我只给出了样式的示例问题。例如,您将需要
    猜你喜欢
    • 1970-01-01
    • 2021-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-22
    • 2015-08-31
    • 1970-01-01
    相关资源
    最近更新 更多