使用 reactstrap 将 Bootstrap Studio 渲染导入 React 的问题

Posted 2023-03-23

【中文标题】使用 reactstrap 将 Bootstrap Studio 渲染导入 React 的问题

【英文标题】：Problems Importing Bootstrap Studio Renders into React with reactstrap

【发布时间】：2018-09-21 22:16:03

【问题描述】：

我正在开发一个项目，设计师正在使用 BootStrap studio，它使用 BootStrap 4 导出为 html，并且我正在使用 reactstrap 将导出的文件转换为 React 组件。

我遇到了类和样式规则的问题，因为原始文件继承自 7 个不同的文件。转换以下内容的最佳方法是什么：

         <div id="nav-bars">
        <nav class="navbar navbar-light navbar-expand-md" id="top-nav" style="background-color:rgba(0,0,0,0.5);color:rgb(255,255,255);">
            <div class="container-fluid"><a class="navbar-brand" href="#" style="background-image:url(&quot;assets/img/logoalt copy.png&quot;);padding-right:5px;background-size:contain;margin-right:0;padding-left:5px;background-position:center;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</a>

在保留 css 规则的同时加入 react 组件？

【问题讨论】：

我无法理解实际问题。 jsx 提供 className 和 style 属性来设置元素的类名和内联样式。但是从静态标记创建 React 组件有什么好处呢？

【参考方案1】：

JSX 要求您的 className= 而不是 class=

见：https://reactjs.org/docs/faq-styling.html