使用样式化组件减少 React 中的重复代码行答案

【问题标题】：Reduce lines of repeated code in React with Styled Components使用样式化组件减少 React 中的重复代码行
【发布时间】：2021-08-03 16:28:56
【问题描述】：

构建一个手风琴样式组件，以便在折叠状态下，仅显示前 40 个字符，展开后用户可以看到整个内容。我是 React/Styled Components 的新手，但是当必然有一种更有效的方式将样式链接到现有组件时，我感觉我经常重复我的样式，有人可以建议吗？

const Accordion = styled.div`
  background-color: #e5e9eb;
  height: 87px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    line-height: 20px;
    padding-left: 24px;
  }
`;

const AccordionExpanded = styled.div`
  background-color: #e5e9eb;
  height: 174px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    line-height: 20px;
    padding-left: 24px;
  }
`;

const Title = styled.h3`
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 24px;
`;

const ExpandIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
`;

const CollapseIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
-webkit-transform: rotate(180deg);
`;

const ExpandableString = ({ attribute, className }: Props) => {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';

  function toggleContent() {
    setIsExpanded(prev => !prev);
  }

  return (
    isExpanded ? <AccordionExpanded className={className}>
      <Title>Goods being sent</Title>
      <span>{fullDescription}</span>
      <CollapseIcon onClick={toggleContent} src={chevron} alt="Collapse content" />
    </AccordionExpanded> : <Accordion className={className}>
      <Title>Goods being sent</Title>
      <span>{shortHeading}</span>
      <ExpandIcon onClick={toggleContent} src={chevron} alt="Expand content" />
    </Accordion>
  );
};

【问题讨论】：

标签： html css reactjs styled-components

【解决方案1】：

您可以使用这个 npm 库将 vanilla css 编写为类，然后将它们生成为变量以用于 React 样式的组件。

https://www.npmjs.com/package/@inspiraller/create-css-vars

【讨论】：

【解决方案2】：

使用 styled-components 中的 css 来包装重复的代码。

语法=>

import styled,{css} from 'styled-components'

const repeatedstyle=css`
    //duplicate styles
`
const maincomponent=styled.div`
    ${repeatedstyle}
`;


import styled,{css} from 'styled-components'

const accordianstyles=css`
    background-color: #e5e9eb;
    border-radius: 2px;
    border: 1px solid #27282a;
    margin-bottom: 48px;
    display: flex;
    align-items: center;
`;
const accordianspanstyles=css`
    font-size: 14px;
    line-height: 20px;
    padding-left: 24px;
`;
const iconstyles=css`
    height: 40px;
    width: 40px;
    float: right;
    margin-right: 12px;
`;

const Accordion = styled.div`
  height: 87px;
  width: 612px;
  ${accordianstyles}
  span {
      ${accordianspanstyles}
  }
`;

const AccordionExpanded = styled.div`
  height: 174px;
  width: 612px;
  ${accordianstyles}

  span {
    ${accordianspanstyles}
  }
`;

const Title = styled.h3`
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 24px;
`;

const ExpandIcon = styled.img`
    ${iconstyles}
`;

const CollapseIcon = styled.img`
    ${iconstyles}
-webkit-transform: rotate(180deg);
`;

const ExpandableString = ({ attribute, className }: Props) => {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';

  function toggleContent() {
    setIsExpanded(prev => !prev);
  }

  return (
    isExpanded ? <AccordionExpanded className={className}>
      <Title>Goods being sent</Title>
      <span>{fullDescription}</span>
      <CollapseIcon onClick={toggleContent} src={chevron} alt="Collapse content" />
    </AccordionExpanded> : <Accordion className={className}>
      <Title>Goods being sent</Title>
      <span>{shortHeading}</span>
      <ExpandIcon onClick={toggleContent} src={chevron} alt="Expand content" />
    </Accordion>
  );
};

【讨论】：