Reactjs 使用自包含文本声明样式化组件

我经常使用始终具有相同内容的样式化组件，例如“•”或“|”

我想知道这样的事情是否可能：

const Divider = styled.div.attrs({
  text: '|',
})({
  margin: '0 5px',
})
<Divider />

const Divider=styled.div.attrs({
正文：“|”，
})({
边距：“0 5px”，
})

而不是像这样写和称呼它：

const Divider = styled.div({
  margin: '0 5px',
})
<Divider>|</Divider>

const Divider=styled.div({
边距：“0 5px”，
})
|

---

---

另外，我知道

文本

不是有效的HTML属性

一种方法是传递

类型

并通过

开关运行它。对于开发人员期望看到的
分隔符的类型，它将更具声明性

工作示例：

components/Divider.js（这可以在
styledVider
组件文件中在线完成，但为了清晰起见，我将其分离到自己的文件中）

组件/Header.js

import styled from "styled-components";
import Divider from "./Divider";

export default styled(Divider)`
  display: inline;
  color: #03a9f3;
  font-weight: bold;
  font-size: 20px;
  margin: 0 5px;
`;

import React from "react";
import Link from "./StyledLink";
import Divider from "./StyledDivider";

export default () => (
  <nav className="container">
    <Link primary link="/">
      Home
    </Link>
    <Divider type="dot" />
    <Link danger link="/about">
      About
    </Link>
    <Divider type="pipe" />
    <Link link="/portfolio">Portfolio</Link>
    <Divider type="pipe" />
    <Link danger link="/legal">
      Legal
    </Link>
    <Divider type="dot" />
    <Link primary link="/contact">
      Contact
    </Link>
    <Divider />
  </nav>
);

从“React”导入React；
从“/StyledLink”导入链接；
从“/styledVider”导入分隔符；
导出默认值（）=>(
家
关于
文件夹
合法的
接触
);

import React from "react";
import Link from "./StyledLink";
import Divider from "./StyledDivider";

export default () => (
  <nav className="container">
    <Link primary link="/">
      Home
    </Link>
    <Divider type="dot" />
    <Link danger link="/about">
      About
    </Link>
    <Divider type="pipe" />
    <Link link="/portfolio">Portfolio</Link>
    <Divider type="pipe" />
    <Link danger link="/legal">
      Legal
    </Link>
    <Divider type="dot" />
    <Link primary link="/contact">
      Contact
    </Link>
    <Divider />
  </nav>
);