尝试将React的逻辑和样式分离为不同构造（使用styled-components）

3 年 ago

科, 雅

2 minutes

标题

尝试将React的逻辑和样式分离构成（使用styled-components）。

开发环境。

“react”: “^18.2.0”,
“typescript”: “^4.9.5”,
“styled-components”: “^6.1.0”

“react”: “^18.2.0″，
“typescript”: “^4.9.5″，
“styled-components”: “^6.1.0″。

为什么要写这篇文章？

在React中，没有固定的目录结构，但在使用styled-components的情况下，我尝试通过将逻辑部分和样式分离来解决问题。由于将所有的逻辑和样式都放在一个组件中会导致代码冗长，因此我采用了这种解决方案。

目录结构

为每一个组件，创建组件、目录和index.tsx，style.ts文件。
为了方便展示示例，创建了一个必须在调用时输入h1~h6中的任一类型的TitleText。这是原子设计中最小的地方，即atoms内部。

TitleText(ディレクトリ名)
  -index.tsx
  -style.ts

首先是index.tsx。

import React, { FC, PropsWithChildren } from "react";
import { STitleText } from "./style";

type Props = {
  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
};

const TitleText: FC<Props & PropsWithChildren> = ({
  tag,
  children,
  ...other
}) => {
  return (
    <STitleText as={tag} {...other}>
      {children}
    </STitleText>
  );
};

export default TitleText;

1. 当as从props中接收到标签名后，会将该标签名应用到组件上（本次只能接收到h1~h6这些标签名）。
2. PropsWithChildren是React预先准备的用于接收children的类型声明。我之前自己创建了用于children的props，但是由于使用频率较高，所以React已经默认为我们准备好了。
3. 我们使用”S”并将其命名为”STitleText”，是为了明确在上述的文件目录结构中，对调用的组件进行样式更改。

接下来是style.ts文件。

(The paraphrased sentence may vary depending on the context.)

import { styled } from "styled-components";

export const STitleText = styled.h1`
  font-size: 30px;
  font-weight: 700;
`

一些補充說明：
1. 別忘了加上 “export”。
2. 雖然原本是 h1，但在 index.tsx 中要求必須使用標籤名稱，所以在呼叫時會有所變更。

试着调用已创建的组件并查看结果。

import React, { FC } from "react";
import TitleText from "../../atoms/TitleText";

const TopLayout: FC = () => {

  return (
    <>
     <TitleText tag="h3">結果こんな感じ</TitleText>
    </>
  );
};

export default TopLayout;

尝试在调用的组件中修改创建的组件的样式。

在进行调用时，可能会有这样一种情况：我想将字体的颜色设为蓝色！！这种情况可能经常发生，甚至相当频繁。

由于呼叫组件也位于相同的目录结构中，所以我们可以在style.ts文件中导入TitleText并写入想要覆盖或添加的样式。

import styled from "styled-components";
import TitleText from "../../atoms/TitleText";

export const STitleText = styled(TitleText)`
  color: blue; //追加したいstyle
  font-weight: 400; //上書きしたいstyle
`;

在之前创建的index.tsx文件中，添加STitleText。

import React, { FC } from "react";
import TitleText from "../../atoms/TitleText";
import { STitleText } from "./style";

const TopLayout: FC = () => {

  return (
    <>
     <TitleText tag="h3">結果こんな感じ</TitleText>
     <STitleText tag="h4">style上書の結果こんな感じ</STitleText>
    </>
  );
};

export default TopLayout;

个人意见

由于构成等方面没有正确答案，所以希望你能将这仅仅作为一种观点来考虑。我认为这可能会持续一段时间。