如何在没有 GraphQL 的情况下正确使用页面组件答案

【问题标题】：How to correctly use page components without GraphQL如何在没有 GraphQL 的情况下正确使用页面组件
【发布时间】：2019-08-12 09:43:29
【问题描述】：

我有一个新的 Gatsby 网站，它有 3 个页面（以后还会有更多页面）。我发现我不得不重复很多样式，我知道必须有正确的方法来避免这样做，但我不确定是什么。我在 Tailwind 中使用 Emotion。

所有页面都有一个英雄元素，包括标题和描述：

<Hero>
  <Title>
    Page title here
  </Title>
  <Lead>
    Descirption text here
  </Lead>
</Hero>

这是它的样式：

const Hero = styled.header`
  ${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
  ${tw`text-gray leading-relaxed mb-1`};
  a {
    ${tw`text-white font-medium no-underline text-purple hover:text-white`};
  }
`

有些页面也有操作按钮：

<Actions>
  <LinkPrimary to="/some-page/">Click for more</LinkPrimary>
  <LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>

整个页面模板看起来像（这是我为每个新页面复制的内容）：

import React from "react"
import Layout from "../components/layout"
import styled from "@emotion/styled"
import { Link } from "gatsby"
import tw from "tailwind.macro"

const Hero = styled.header`
  ${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
  ${tw`text-gray leading-relaxed mb-1`};
  a {
    ${tw`text-white font-medium no-underline text-purple hover:text-white`};
  }
`
const Actions = styled.section`
  ${tw`text-center m-2 mt-8 mb-24`};
`
const LinkPrimary = styled(Link)`
  ${tw`block bg-pink hover:bg-green-light text-blue-dark font-bold no-underline py-4 px-4 m-4 rounded`}
`
const LinkSecondary = styled(Link)`
  ${tw`block bg-regal-blue hover:bg-blue-light text-pink hover:text-white font-semibold no-underline py-4 px-4 m-4 rounded`}
`

export default () => (
  <Layout>
    <Hero>
      <Title>
        Hey I'm The About Page
      </Title>
      <Lead>
        Learn all about us 
      </Lead>
    </Hero>
    <Actions>
      <LinkPrimary to="/some-page/">Click for more</LinkPrimary>
      <LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
    </Actions>
  </Layout>
)

我遇到的问题是每个新页面我都必须重复样式。我在src/pages 中手动创建这些页面并编辑每个页面的标题和描述。具有按钮的页面我也在编辑按钮文本和 URL。

我猜一定有一种方法可以创建一个“英雄”组件，其中包括标题和主角及其样式，然后将其导入每个页面并逐页编辑内容。

并非所有页面都有操作按钮，因此它们可能需要在自己的组件中并在需要的地方导入。

如果有人能给我一个基本的演示或链接到一些解释这将不胜感激的文档。我所有的研究只给出examples of how to do this querying with GraphQL。

【问题讨论】：

你只是想把重复的代码抽象成它自己的组件吗？数据从何而来？
是的，将其放入可重用组件中听起来是最好的方法。我正在将数据输入到 html 中。
您有可以共享的存储库吗？
@ksav 我会看看我是否可以得到一个回购，但基本上我所拥有的是this，在那里你可以看到有一个src/pages/index.js 的样式。现在假设您想创建一个名为“Users”的页面，您首先复制索引页面并将其重命名为src/pages/users.js，问题由此开始，您必须在这两个文件中保持相同的样式。另一种描述方式是；我有一个用于多个页面的页面模板，每个页面都有不同的内容，但它们都使用相同的样式。

标签： reactjs gatsby

【解决方案1】：

好的，我想我有一些有用的东西，所以会发布一个答案。

创建一个英雄组件src/components/hero.js

import React from "react"
import styled from "@emotion/styled"
import tw from "tailwind.macro"

const Header = styled.header`
  ${tw`p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide text-lg font-medium`};
`
const Lead = styled.p`
  ${tw`text-purple-light leading-relaxed text-lg`};
`
const Hero = props => (
  <Header>
    <Title>{props.heading}</Title>
    <Lead>{props.text}</Lead>
  </Header>
)

export default Hero

然后在你的页面，索引页面，关于页面，任何需要的地方使用它：

import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"

export default () => (
  <Layout>
    <Hero
      heading="Hello world!"
      text="This is the lead text for this page."
    />
...
  </Layout>
)

现在最棒的一点是我的 hero 元素的样式都包含在我的 Hero 组件中。我可能会对号召性用语按钮做同样的事情。

如果您想在文本中包含链接或 html 标签，您可以执行以下操作：

<Hero
      heading={[<em>Links</em>, " that", <br />, " go places"]}
      text={[
        "You can write some text here followed by ",
        <Link to="/learn/">
          a link to another page
        </Link>,
        " that you can click.",
      ]}
    />

【讨论】：