DEV Community
·
公开构建：我在React图像布局中使用Flexbox和Grid的旅程 - 第三幕：使用SCSS构建和样式化导航
原文英文，约1800词，阅读约需7分钟。
📝
内容提要
在第三幕中，我们创建了可重用的React组件和主导航，并使用Scss为其添加样式。MainNavigation作为网页头部，随后构建了Layout组件，将MainNavigation嵌入其中，并在App.tsx中使用Layout。最后，调整样式以解决页面布局问题，为进入第四幕做准备。
🎯
关键要点
-
在第三幕中，创建了可重用的React组件和主导航。
-
MainNavigation作为网页头部，包含了导航链接。
-
使用Scss为MainNavigation添加样式，使其更具可读性和美观性。
-
构建Layout组件，将MainNavigation嵌入其中，并为其他内容提供结构。
-
在App.tsx中使用Layout组件，确保MainNavigation在每个页面上都可见。
-
调整样式以解决页面布局问题，准备进入第四幕。
❓
延伸问答
如何在React中创建可重用的组件？
在React中，可以通过定义一个函数并返回JSX来创建可重用的组件，例如MainNavigation组件。
SCSS在React组件中的作用是什么？
SCSS用于为React组件添加样式，使其更具可读性和美观性，通常通过导入SCSS模块来实现。
Layout组件的主要功能是什么？
Layout组件用于将MainNavigation嵌入网页结构中，并为其他内容提供结构，确保导航在每个页面上可见。
如何在App.tsx中使用Layout组件？
在App.tsx中，通过导入Layout组件并将其包裹在其他内容周围来使用，例如<p>Hello world!</p>。
如何解决页面布局问题？
可以通过调整CSS样式，例如修改padding或使用box-sizing属性，来解决页面布局问题。
MainNavigation组件包含哪些内容？
MainNavigation组件包含一个标题和一个导航链接列表，提供网页的主要导航功能。
🏷️
