如何缩短组件中传递的项目

Question

我使用 styled-components 每个组件都来自 styled-components 我传入其他组件，为了应用它们，问题是我的代码看起来很难看，因为我传入其他组件的每个组件样式看起来像这样

SideBarStyledComponents.js

export default function SideBarStyledComponents(props) {
    const {SideBarValue} = React.useContext(CounterContext);
    const [SideBarThemeValue] = SideBarValue;

    const PageColor = SideBarThemeValue && SideBarThemeValue.PageContentColor;
    const AlertBg = SideBarThemeValue && SideBarThemeValue.AlertBackground;

    const LessonContainers = styled.div`
      margin: 2rem 0 2rem 0;
    `;

    const LessonSideBarTitle = styled.h1`
      font-size: 1.8rem;
      font-weight: 500;
      color: ${(PageColor ? PageColor : "#2c3e50")};
      font-family: 'Roboto';
      margin-top: 1rem;
    `;
    return(
        <RoutesPage {...props} LessonContainers={LessonContainers} SideBarThemeValue={SideBarThemeValue}
       LessonSideBarTitle={LessonSideBarTitle}/>
    );
}

RoutesPage.js

function RoutesPage(props) {
    const {path} = props.path;

    const routes = [
        {
            path: `${path}/Introduction`,
            component: () => <Introduction {...props} />
        },
        {
            path: `${path}/Creating Your First Javascript`,
            exact: true,
            component: () => <CreatingFirstJS {...props} />
        },
        {
            path: `${path}/Guardian`,
            component: () => <h2>Shoelaces</h2>
        }
    ];

    return (
        <>
            <Switch>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.component}
                    />
                ))}
            </Switch>
        </>
    );
}

请注意，您已经注意到我传递给组件的每一种样式，所以每次我创建一个新组件时，每一种样式我都必须通过这种方式传递我将有很多组件，因为我正在创建一个侧边栏，我想知道是否有办法摆脱这个

Answer 1

您应该在一个单独的文件（或多个文件）中定义所有外部样式组件。然后你应该直接在你要使用它的组件中导入那些样式化的组件。

将它们作为道具传递是一种不好的做法。

例如，您可以创建一个名为 'StyledComponents.js' 的文件并导出所有样式化的组件。

...

export const LessonContainers = styled.div`
  margin: 2rem 0 2rem 0;
`;

export const LessonSideBarTitle = ({children}) => {
  const {SideBarValue} = React.useContext(CounterContext);
  const [SideBarThemeValue] = SideBarValue;
  const PageColor = SideBarThemeValue && SideBarThemeValue.PageContentColor;

  const H1 = styled.h1`
    font-size: 1.8rem;
    font-weight: 500;
    color: ${(PageColor ? PageColor : "#2c3e50")};
    font-family: 'Roboto';
    margin-top: 1rem;
  `;

  return <H1>{children}</H1>
}
...

现在在 Introduction 或 CreatingFirstJS 组件中，您可以像这样导入必要的样式化组件：

import {LessonSideBarTitle} from 'path/to/StyledComponents';

如何缩短组件中传递的项目

How to shorten passed items in components

javascript

element

reactjs

styled-components