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

我使用样式化组件我在其他组件中传递的样式化组件中的每个组件，为了应用它们，问题是我的代码看起来很难看，因为我在其他组件中传递的每个组件样式都是这样的

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

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

导出默认函数SideBarStyledComponents（props）{
const{SideBarValue}=React.useContext（CounterContext）；
常量[SideBarThemeValue]=SideBarValue；
const PageColor=SideBarThemeValue&&SideBarThemeValue.PageContentColor；
const AlertBg=SideBarThemeValue&&SideBarThemeValue.AlertBackground；
const LessonContainers=styled.div`
保证金：2rem 0 2rem 0；
`;
const LessonSideBarTitle=styled.h1`
字体大小：1.8rem；
字号：500；
颜色：${（PageColor？PageColor:#2c3e50”）}；
字体系列：“Roboto”；
页边顶部：1rem；
`;
返回(
);
}

routePage.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}/>
    );
}

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

功能路线页面（道具）{
const{path}=props.path；
常数路由=[
{
路径：`${path}/Introduction`，
组件：（）=>
},
{
路径：`${path}/创建第一个Javascript`，
确切地说：是的，
组件：（）=>
},
{
路径：`${path}/Guardian`，
组件：（）=>鞋带
}
];
返回(
{routes.map（（路由，索引）=>(
))}
);
}

---

请注意，您已经注意到我传递给组件的每个样式，因此每次我创建一个新组件时，我必须以这种方式传递的每个样式，我将有许多组件，因为我正在创建一个侧栏，我想知道是否有办法消除此问题，您应该在一个单独的文件中定义外部的所有样式组件（或多个文件）。然后，您应该将这些样式化的组件直接导入到您要使用它的组件中

将它们作为道具传递是一种糟糕的做法

例如，您可以创建一个名为“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>
}
...

---

您应该在任何React组件之外声明/定义所有样式化组件。请参阅。我完全同意您的看法，我使用了这种方法，但问题在于React.useContext，请注意，我使用了React.useContext，然后我得到了值（

SideBarThemeValue

）然后我在样式化组件中应用了布尔运算，例如

color:${（PageColor？PageColor:#2c3e50”）}；

当我的样式化组件在一个单独的文件中时，我无法获得

SideBarThemeValue

值，我给出了类似的错误（初始化之前），我将编辑我的问题现在我有一个想法我将写现在请看我编辑了我的问题请告诉我这种方法合适吗？@Synchro我编辑了代码以获取单独文件中的样式化组件中的上下文值。基本上，将其包装在一个React组件中，并将样式化组件作为React元素返回。然后，我将如何处理是否将样式化组件导入其他组件？例如，“H1”您不再需要导入

H1

。它包装在

LessonSideBarTitle

组件中。您只需导入

LessonSideBarTitle

组件并将其用作（扩展的）样式化组件。查找

高阶组件

。