语义-UI-React 页脚

Question

这几天我一直在学习 ReactJS，并且一直在尝试使用 semantic-ui-react 在 ReactJS 中构建一个网站。我知道有些组件现在可以使用，但我仍然不知道在创建页脚等场景中该怎么做......通常，在我的原始 HTML 中，我会有 semantic.min.css 文件包含在底部：

    <div class="ui inverted pink vertical footer segment">
        <div class="ui center aligned container">
            <h4 class="ui inverted header">&copy; Copyright 2017 | All rights reserved | Blahhh</h4>
            <a href="https://www.facebook.com/"><i class="facebook square icon big"></i></a>
            <a href="https://twitter.com/"><i class="twitter square icon big"></i></a>
            <a href="https://www.linkedin.com/company/c"><i class="linkedin square icon big"></i></a>
        </div>
    </div>

现在我想把它翻译成semantic-ui-react。默认情况下，页脚是 class 不是反应中的组件，因此没有组件......我认为这意味着我必须制作自己的组件并基本上编写上面的代码。我现在的问题是我不知道如何让它像使用普通的旧 semantic.min.css 一样渲染。我在某处阅读了下载 css 文件并将其包含在内的信息，但是我不知道去哪里（MyCustomFooterComponent 或 index.html），在这样做的过程中，我不是增加了我网站上的加载时间。这是否意味着到处都有页脚，仅针对一小部分自定义代码，将加载整个 CSS 文件？

此外，在构建之后，我添加语义 CSS 和 semantic-ui-react 的 CSS 是否会出现双重导入情况？

抱歉问了这么长的问题，但我是新手，我想在犯下严重错误之前找出我能做的。

Answer 1

如果您使用的是 react-semantic-ui 那么您已经包含了 'the old semantic-ui.min.css'。参见 here。

因此，创建一个组件并将这些代码放入 render() 中，将 'class' 更改为 'className' 然后使用它。

语义-UI-React 页脚

Semantic-UI-React Footer

reactjs

semantic-ui

node-modules

semantic-ui-react