如何使用 Styled-Components 构建响应式 React 导航菜单

构建 React 菜单并非难事。不妨试试 style-components！🔥

这可能不是最先进的 React Nav，或者展示最佳实践，但它会让您立即启动并运行！

让我们直接进入正题 D:

查看演示！

回购

我假设你已经了解一些

1. 开发环境。例如 Node、VSCode 等。
2. 了解如何安装 NPM 包
3. 对 React 有一定的了解
4. 对 React Router 有一定的了解
5. 一些基本的 CSS 或 SCSS

1. 从 Create-react-app 开始

从一个干净的项目开始。删除 create-react-app 预加载的文件，别忘了删除 中与测试相关的代码行index.js。我还删除了 中App.js除 之外的所有内容App.css。删除 中的所有内容，App.css只留下、和 的.AppCSS 选择器。min-height: 100vhbackground-color: #282c34position: relative

你的项目应该看起来像这样

看起来应该App.css是这样的

2. 干净的目录

1. 创建一个components文件夹和一个pages文件夹。

2. 文件夹内components包含2个文件：Menu.js和Toggle.js。

3. 文件夹内包含3个pages文件：HomePage.js，，ExamplePage.js。ContactPage.js

3. 将文件转换为功能组件

您的HomePage.js、ExamplePage.js和ContactPage.js现在应该看起来像这样。

主页示例页面联系页面

4. 安装 styled-components

我更喜欢使用 Yarn 包管理器，因此要安装 styled-components，请运行以下命令：yarn add styled-components。如果您使用的是 NPM，请使用以下命令：npm install --save styled-components。确保在我们的三个页面中分别导入 styled-components，如下所示：import styled from styled-components。

5. 为页面添加样式组件

、和应该共享相同的布局和样式组件HomePage。因此只需复制粘贴即可。别忘了在组件中更改相应的页面名称。ExamplePageContactPageHeading

他们应该会喜欢这个

6. 安装 react-router-dom

1. 将 react-router-dom 安装到我们的项目中。。yarn add react-router-dom或者npm install --save react-router-dom。
2. 像这样导入反应路由器：import { BrowserRouter as Router, Route, Switch } from react-router-dom。
3. 导入我们的pages文件，App.js以便我们可以使用 React Router。像这样导入页面：import HomePage from ./pages/HomePage; import ExamplePage from ./pages/ExamplePage; import ContactPage from ./pages/ContactPage;
4. 请参阅下面的图片，了解如何在App()

到目前为止App.js应该是这样的

如果目前一切顺利，React Router 应该可以正常工作了。在 URL 中，尝试将路径更改为 localhost:3000/example 或 /contact。

7. 完成 Menu 和 Toggle 组件

1. 在步骤 2 中，我们在 components 文件夹中创建了Menu.js和文件。让我们将它们转换为函数组件。Toggle.js

2. 首先，Menu.js让我们Link像这样从 react-router-dom 导入：import { Link } from 'react-router-dom')。我们还将使用一些图标。我更喜欢https://react-icons.github.io/react-icons/这样，因为它简单。因此，让我们像这样安装 react-icons：yarn add react-icons此外，请确保像这样导入图标：import { FaBars, FaTimes} from 'react-icons/fa'。不要忘记添加，/fa因为我们是从库中导入的Font Awesome。您可以随意使用任何库，只需浏览上面提到的网站即可。如果您要从库Icon中使用Material，则可以像这样导入文件：import { MdBars} from 'react-icons/md'。文件应该像这样
   
   

3. 让Menu.js我们再次像这样导入样式组件：import styled from styled-components。
   你会注意到我Link直接传入了，而不是在 DOM 中StyledLink创建标签。我们需要做的就是将属性添加到我们的。<a>anchor/</a>toStyledLink

4. 然后让我们为 创建样式组件Menu.js。从StyledMenu组件开始。它应该像这样

5. 接下来，StyledMenu我们需要菜单链接，以便用户点击导航页面。应该像这样

6. 现在我们需要一种切换菜单状态的方法。如果菜单已切换或状态设置为true，我们需要一种通过将状态切换为 来关闭菜单的方法false。让我们在菜单中添加一个简单的切换按钮。它应该看起来像这样

7. 菜单的最后一步是将样式组件添加到我们的Menu()样式表中。别忘了to='*'为链接添加属性。这些属性是为了让我们的Router组件App.js能够理解用户点击相应链接后应该渲染哪些视图。例如，如果用户点击了/contact链接，Contact组件App.js就会按照我们声明的路径进行渲染，如下所示path='/contact'。
   

8. 最后我们有了Toggle.js。Toggle组件是最基本的。它只负责更改我们的切换状态Menu。我们已经将它变成了一个函数式组件，所以让我们首先像下面这样styled-components导入和。最后，让我们创建组件，将它添加到我们的空组件中，然后像下面这样添加我们的图标。react-iconsimport styled from 'styled-components'import { FaBars } from 'react-icons/fa'StyledToggleToggle()FaBars
   

8. 让我们使用新制作的组件

1. 回到App.js，就像我们导入pages组件一样，让我们​​像这样导入Menu.js和组件Toggle.js
   

2. 现在让我们将组件添加到我们App()的
   

3. 您应该注意到我们的菜单正在渲染。它已经在工作了。您还应该注意到CloseToggle菜单右上角的按钮。但是，您看不到我们的Toggle按钮，因为Menu挡住了它。让我们state通过使用钩子将 添加到我们的应用程序中来解决这个问题useState()。在应用程序的顶部，像这样导入钩子：import { useState } from 'react'。现在对于我们的状态，我们需要能够保存切换状态的值，并且能够切换切换状态。它看起来应该是这样的 我们最初将状态设置为 ，因为当用户登陆我们的网站时，不应渲染菜单。因此从逻辑上讲，将状态最初设置为 是最合理的。
   
   navToggledfalse

4. 为了进一步利用我们的useState钩子，让我们创建一个用于切换状态的函数。我们把它命名为setNavToggle。这个函数的唯一职责是切换当前navToggled状态的反状态。例如，如果当前navToggled状态设置为 false，当调用该函数时，它会将新状态设置为 false 的反状态，使其变为 true。如果当前navToggled状态为 true，该函数会将状态更改为 false 的反状态，使其变为 true。它应该如下所示：
   

5. 现在我们已经有办法处理菜单的切换状态了，让我们把它添加到Menu组件中来利用它。这样我们就可以将菜单切换为false。为此，我们将把它作为 prop传递handleNavToggle给组件。像这样Menu
   

6. 现在我们已经将处理函数Menu作为 prop 传递给了组件，现在我们可以在Menu组件内部更改状态了。不过首先，让我们先在组件内部接受传入的 prop Menu。像这样
   

7. 现在我们的目标是能够关闭菜单，或者将菜单状态切换为false。为此，我们为CloseToggle组件添加一个点击事件监听器，然后传入handleNavToggle。在 React 中，你需要使用驼峰命名法，所以应该像这样onClick={handleNavToggle}
   

8. 您会注意到，如果您单击CloseToggle按钮，则什么也不会发生。那是因为App.js我们在强制渲染组件Menu，无论状态如何。让我们Menu通过使用三元运算符动态渲染组件来解决这个问题。它看起来应该是这样的， 我将用伪代码来解释。这里我们说的是，渲染。我们正在查看左侧的值是否为。在这种情况下，我们正在查看状态是否为真。如果状态确实为真，那么我们将渲染右侧的内容。如果不是真，就像 if else 语句一样，我们将渲染右侧的内容。在这种情况下，我们不想渲染任何内容。所以我们使用。本质上，它是 您还应该注意到，如果您尝试切换按钮，它会起作用。因为我们只在状态为时渲染您还会注意到，如果我们再次尝试切换，什么也不会发生。
   
   if the navToggle state is true ?<Menu/> : if its not, then return null?trueNavTogglednavToggle?:nullif ? do this : else do this.
CloseToggleMenutrue.Menu

9. 让我们为Toggle组件添加功能！回到App.js，我们只需将处理函数作为 prop 传递给Toggle组件即可，如下所示
   

10. 让Toggle.js我们再次通过重构来接受传入的处理函数，如下所示
    

11. 现在将我们的函数添加为点击事件，如下StyledToggle所示
    

如果到目前为止一切进展顺利，它应该是
功能齐全、响应迅速的！

9. 👏 恭喜！🔥

您已成功使用 Styled-components 构建了一个完全响应式的 React 导航！如果效果不如预期，我非常乐意帮助您找到解决方案！您可以使用下方的评论区，或者在Twitter 上直接给我留言！

10. 奖励动画！

让我们使用一些时髦的动画让我们的 React 应用程序变得更好。

1. 我们将使用animate.css。它是一个轻量级的动画库，并且非常容易在 React 应用中实现。像这样安装yarn add animate.css，或者npm install --save animate.css

2. 在index.js下面import App from './App';添加import 'animate.css';

3. 就这样我们的整个应用程序都可以访问了animate.css。

4. 首先，让我们为Link组件和 中的单个CloseToggle组件添加一些动画Menu.js。就像 这样，我们的菜单中应该有一些流畅的动画。注意不要沉迷于动画。不建议将动画添加到整个。例如，您不应将此类动画添加到整个组件，因为它可能会导致一些性能问题！className="animate__animated animate__fadeInRight"

parent divStyledMenu

5. 最后，回到HomePage.js和，我们来做类似的事情。让我们给组件添加一些动画ExamplePage.js。像这样。这里有一个例子ContactPage.jsHeadingclassName="animate__animated animate__fadeInLeft"HomePage.js
   

结论！👋

以上就是如何使用 Styled-Components 💻 构建响应式 📱 React 导航菜单的总结。如果你已经读到这里，那你还有大把的时间。哈哈🤣 非常感谢你的宝贵时间，希望你一切顺利！

如果您有任何问题、疑虑或者只是想讨论代码，请随时在Twitter上联系我！

祝你编码愉快！ ✌️

您是初级 Web 开发人员吗？

作为一名自学成才的前端 Web 开发人员，如何保持专注？

克里斯·汉森·21年7月29日

#beginners #webdev #生产力 #devjournal