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

【问题标题】：Why can I nest Styled Components but not ordinary React Components为什么我可以嵌套 Styled Components 而不是普通的 React 组件
【发布时间】：2020-09-29 05:25:42
【问题描述】：

当我直接使用 Styled Components 时会呈现以下组件：

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

【问题讨论】：

有什么错误吗？

标签： reactjs styled-components

【解决方案1】：

您必须在自定义组件中使用 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>

【讨论】：

【解决方案2】：

据我所知，styled-components 期待“孩子”，这意味着你们可以互相嵌套。

归根结底，它是一个样式化的 div (styled.div) 和 div 期待孩子。

您也可以使用 React 组件执行此操作，但是您需要显式渲染子组件，以便它们可以用作父组件。然后你就可以嵌套它们了。

所以，如果你想渲染：

<Fragment>
    <ContainerFlex >
        <column>
         <p>Works</p>
        </column>
    </ContainerFlex >
</Fragment>

您需要ContainerFlex 才能渲染孩子：

        <column>
         <p>Works</p>
        </column>

因此，您的组件定义将是：

import React from 'react';

import { Container } from './Styles';

const ContainerFlex = (props) => {

  return (
  <Container>
     {props.children}
  </Container>
  );
};

export default ContainerFlex;

您必须对column 组件执行相同的操作，因为它需要渲染其子组件（即<p>Works</p>）：

import React from 'react';

import { Column } from './Styles';

const column = (props) => {

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

export default column;

【讨论】：