Объявите styled-компонент с автономным текстом

Question

Часто я использую стилевые компоненты, которые всегда имеют одинаковое содержимое, например, «•» или «|».

Интересно, возможно ли что-то подобное:

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

Вместо того, чтобы писать и называть это так:

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

---

PS.Я знаю, что text не является допустимым атрибутом HTML

Answer 1

Один из подходов состоит в том, чтобы передать type и пропустить его через switch.Это будет более декларативно в отношении того, какой Divider разработчик может ожидать отрисовки.

Рабочий пример : https://codesandbox.io/s/5y1n9mv08x

компонентов/Divider.js (это можно сделать in-line в файле компонента StyledDivider, но для ясности я разделил его на собственный файл)

import React from "react";
import PropTypes from "prop-types";

const typeReducer = type => {
  switch (type) {
    case "backslash":
      return "\\";
    case "dash":
      return "-";
    case "dot":
      return "•";
    case "pipe":
      return "|";
    case "forwardslash":
      return "/";
    default:
      return <hr />;
  }
};

const Divider = ({ className, type }) => (
  <div className={className}>
    {typeReducer(type)}
  </div>
);

export default Divider;

Divider.propTypes = {
  className: PropTypes.string.isRequired,
  type: PropTypes.string
};

component / StyledDivider.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;
`;

компонентов / Header.js

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>
);