如何使用React Styled Components和React.js构建FAQ页面

DebugUsery
74 阅读7分钟

使用React Styled Components和React.js构建FAQ页面

解决用户的问题和担忧是企业、在线供应商，甚至是你的小博客或网站的首要任务。处理用户疑问的一个有效方法是拥有一个全面的常见问题（FAQ）页面。

在本教程中，我们将在React.js旁边使用被称为React-styled组件的现代网页设计库，创建一个有吸引力的FAQ页面，可以采用并整合到新的或已经存在的网站中。

主要收获

通过阅读本教程，读者将对以下内容有充分的了解。

  • 用React-styled组件和React.js创建FAQ页面。
  • 添加和使用风格化组件。
  • 样式化和自定义FAQ页面。
  • 用JSON添加问题和答案。
  • 用React-styled组件创建可重用的组件。

前提条件

尽管本文对初学者非常友好，但对React.js和其他设计框架的基本知识将使你能够跟上教程的进度。

如果你不具备上述任何条件，请花点时间报名参加速成班。

教程概述

本文将分为使用React-styled组件和React.js创建一个FAQ页面所需的各个步骤。

让我们从第一步开始。

第1步：创建React.js应用程序

每个React开发周期都是从创建react app 。

为了实现这一点，在你的命令终端，运行如下所示的命令。

npm create-react-app Faq-app

替代方案，如果你是yarn 用户。

yarn create-react-app Faq-app

上述命令将设置你的应用程序并安装开始开发所需的默认依赖项。

第2步：设置依赖项

React.js本身能够做很多很酷的事情。当我们把这种能力与一些包的依赖性结合起来时，在我们的例子中是React-风格的组件。这将极大地降低开发和造型我们的应用程序的复杂性。

为了将这些依赖项安装到我们的react app ，我们回到命令终端，运行下面的命令。

npm install styled-components

对于yarn 用户。

yarn add styled-components

就这么简单，我们已经成功地将风格化组件添加到我们的应用程序中。

随意打开package.json 文件并检查styled-components 的依赖性。

它看起来应该与此类似。

"dependencies": {
  "chartist": "^0.11.4",
  "classnames": "^2.3.1",
  "react": "^17.0.2",
  "react-chartist": "^0.14.4",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "styled-components": "^5.2.3",
  "web-vitals": "^1.1.1"
}

第3步：创建一个问题和答案的数组

在本教程中，我们打算采用的方法是建立一个JSON ，该文件包含一个问题数组及其相应的答案。

让我们将该文件命名为faq.json 。

然后，我们通过创建一个map 函数来显示问题，该函数在数组上循环，并相应地显示我们所有的问题和答案。

为了实现这一目标，在src 文件夹中创建一个faq.json 文件，以容纳问题和答案，如下图所示。

[
 {
  "id": 1,
  "question": "What are the services do you offer",
  "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates corporis vitae tempora quod provident tenetur culpa dolore facere? Earum, dolor?"
 },
 {
  "id": 2,
  "question": "what are our preferred method of payment",
  "answer": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto iusto veniam eveniet labore impedit nam"
 },
 {
  "id": 3,
  "question": "Are your services beginners friendly",
  "answer": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, sed. Dolores,"
 },
 {
  "id": 4,
  "question": "what how does it take to upgrade a package",
  "answer": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, sed. Dolores, sequi."
 },
 {
  "id": 5,
  "question": "Where are your offices located around the world",
  "answer": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, sed. Dolores, sequi."
 }
]

这里，我们使用了一个样本问题的数组。

但是，你可以使用关于你的网站、产品或服务的实际问题。

每个假问题都有一个id ，这是映射操作所需要的，以防止数据的重复。我们也有一个问题字段，和一个相应的答案字段。

第4步：创建banner组件

旗帜组件是显示问题和答案的容器。

为了设置该组件，我们将创建一个Banner.js 文件，其代码如下所示。

import React, { useState } from "react";
import { Container, Header, Entity, Inner, Question, Text } from "./styles ";

const QuestionContext = React.createContext();
export default function Banner({ children, ...restProps }) {
  return (
    <Container {...restProps}>
      <Inner>{children}</Inner>
    </Container>
  );
}
Banner.Header = function BannerHeader({ children, ...restProps }) {
  return <Header {...restProps}> {children}</Header>;
};
Banner.Entity = function BannerEntity({ children, ...restProps }) {
  const [open, setOpen] = useState(false);
  return (
    <QuestionContext.Provider value={{ open, setOpen }}>
      <Entity {...restProps}> {children}</Entity>
    </QuestionContext.Provider>
  );
};
Banner.Question = function BannerHeader({ children, ...restProps }) {
  const { open, setOpen } = React.useContext(QuestionContext);

  return (
    <Question onClick={() => setOpen((open) => !open)} {...restProps}>
      {children}
      {open ? <h3>^</h3> : <h3>+</h3>}
    </Question>
  );
};
Banner.Text = function BannerText({ children, ...restProps }) {
  const { open } = React.useContext(QuestionContext);
  return open ? <Text {...restProps}>{children}</Text> : null;
};

让我们更好地理解上面的代码片段。

  • 我们创建并使用了一个名为QuestionContext 的上下文API来监控我们的Banner组件的状态，并确保两个问题不能同时打开。
  • 此外，我们导入了一些可重复使用的组件，即标题、问题、文本和实体，我们将很快创建并导出这些组件。
  • 标题将显示在页面的顶部，告诉用户这是个FAQ页面。而Question 和Text 将分别显示为问题和答案。

第5步：对Banner组件进行造型

我们之前导入的那些可重用的组件现在也将使用React风格的组件库来创建和风格化。

可重用组件的想法是，它们可以被导入并用于网站的任何部分，而不需要重新编写相同的代码块。

要做到这一点，我们打开一个新的Styles.js 文件，随后我们将在下面写下我们所有的样式函数。

import styled from "styled-components/macro";

export const Container = styled.div`
  border-bottom: 9px solid #070707;
  display: flex;
`;
export const Entity = styled.div`
  color: #070707;
  border: 1px solid #070707;
  max-width: 690px;
  width: 99%;
  margin-bottom: 10px;
  margin: auto;
  &:first-of-type {
    margin-top: 1.5em;
  }
`;
export const Inner = styled.div`
  padding: 75px 40px;
  max-width: 800px;
  margin: auto;
  flex-direction: column;
  display: flex;
`;
export const Question = styled.div`
  font: 25px;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 2px;
  display: flex;
  font-weight: normal;
  background: #1a1919;
  padding: 0.75em 1.12em;
  align-items: center;
`;
export const Text = styled.p`
  max-height: 1190px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  background: #303030;
  transition: max-height 0.23s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.9em 2.1em 0.7em 1.4em;
  user-select: none;
  white-space: pre-wrap;

  @media (max-width: 550px) {
    font-size: 15px;
    line-height: 25px;
  }
`;
export const Header = styled.h1`
  color: #070707;
  line-height: 7;
  margin-top: 0 !important;
  font-size: 45px;
  margin-bottom: 9px;
  text-align: center;

  @media (max-width: 600px) {
    font-size: 33px;
  }

  color: #070707;
`;

首先，这些不是纯粹的CSS代码，我们只是使用styled-component库来实现看起来像CSS的JavaScript（CSS-in-JS），这就是这种方法的魅力所在。

使用styled-components库时，首先要做的是把它导入到你希望使用它的任何文件中，如上图所示。

然后，我们添加了一些响应性，使我们的页面在大、中、小屏幕上看起来都很好。

第6步：映射和显示常见问题

人们认为，显示数组中的项目的最理想方式是使用map 函数。

在我们的App.js ，首先，我们清除默认的模板。

此后，我们将从先前创建的JSON文件中导入我们的样本问题，然后通过设置map 函数。

import React from "react";
import questions from "./Faq.json";
import Banner from "./Banner";
export function App() {
  return (
    <Banner>
      <Banner.Header>Frequently Asked Questions</Banner.Header>
      {questions.map((question) => (
        <Banner.Entity key={question.id}>
          <Banner.Question>{question.question}</Banner.Question>
          <Banner.Text>{question.answers}</Banner.Text>
        </Banner.Entity>
      ))}
      <h4>
        Question not on the list? Contact out help desk for further enquiries
      </h4>
    </Banner>
  );
}

从上面的片段中，我们导入了我们的常见问题，进行了映射，并使用可重复使用的Banner 组件将它们与相应的答案显示出来。

我们的FAQ页面已经准备好在我们的浏览器上查看。要做到这一点，我们在文本编辑器中打开command terminal ，并运行以下命令。

npm start

也可以这样做。

yarn start

一旦开发服务器启动并运行，你应该得到一个看起来像这样的页面。

faq page

最后，为了进一步提高我们页面的美观程度，我们将继续，并添加一些字体类，删除不必要的边距，并将页面的背景颜色改为#070707。

要做到这一点，请删除app.css 文件，然后在index.css 文件中，简单地粘贴下面的代码片断。

body {
  background-color: #070707 !important;
  margin: 0;
  color: white;
  font-family: "Arial", "Helvetica Neue", "sans-serif";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smothing: grayscale;
  font-size: 16px;
}

一旦代码片断被正确实施，你的FAQ页面应该看起来像下面这样。

faq page

结论

React风格的组件，正如我们在这篇文章中广泛讨论的那样，与React.js相结合，可以用在许多富有成效的方面。在本教程中，我们用React-styled组件创建、设计和显示了一个FAQ页面。

avatar
文章
阅读
粉丝