时间戳

首页 > 解决方案 > 为什么我可以嵌套 Styled Components 而不是普通的 React 组件

reactjs - 为什么我可以嵌套 Styled Components 而不是普通的 React 组件

问题描述

当我直接使用样式化组件时，会呈现以下组件：

<Fragment>
    <Container>
        <Column>
        Works
        </Column>
    </Container>
</Fragment>

其中 Container 和 Column 被简单地定义为其他文件中的样式组件：

export const Container = styled.div`
    display: flex;
`;

export const Column = styled.div`
    display: flex;
`;

但是，当我尝试以正常的 React 方式构建更多组件并嵌套它们时，它们不会呈现在屏幕上。

例如，我定义了这个列组件：

import React from 'react';

import { Column } from './Styles';

const column = () => {

  return (
  <Column>

  </Column>
  );
};

export default column;

其中 column 在 styledComponent 中定义：

import styled from 'styled-components';

export const Column = styled.div`
    display: flex;
`;

而这个容器组件：

import React from 'react';

import { Container } from './Styles';

const ContainerFlex = () => {

  return (
  <Container>

  </Container>
  );
};

export default ContainerFlex;

其中容器被定义为 styledComponent：

import styled from 'styled-components';

export const Column = styled.div`
    display: flex;
`;

但是 Column 和它的文本不会在这里呈现，只有容器：

<Fragment>
    <Container>
        <Column>
        Works
        </Column>
    </Container>
</Fragment>

标签： reactjsstyled-components

解决方案

您必须children在自定义组件中使用道具，以便可以呈现封闭元素。

您定义自定义组件的方式它们只呈现styled组件，而不是封闭的子组件。

解决方案，

ContainerFlex 组件


import React from 'react';

import { Container } from './Styles';

const ContainerFlex = ({children}) => {
  return (
    <Container>
     {children}
    </Container>
  );
};

export default ContainerFlex;

ColumnFlex 组件

import React from 'react';

import { Column } from './Styles';

const ColumnFlex = ({children}) => {

  return (
    <Column>
     {children}
    </Column>
  );
};

export default ColumnFlex;

当你渲染你的主组件时，enclose 元素将立即渲染。

<Fragment>
    <Container>
        <Column>
         <p>Works</p>
        </Column>
    </Container>
</Fragment>

推荐阅读