ReactJS - Props.children 已更改，但组件未重新渲染

Question

目前，我有 2 class 关于容器包装器，用于渲染内容作为一个孩子。 它仅在我使用诸如containerEz class 但不在BaseTemplateContainer class 之类的样式组件时才有效

如果我想修复 class BaseTemplateContainer 在 this.props.children 更改时重新渲染，该怎么做？

class containerEz 当儿童道具改变时重新渲染

const ContainerEz = ({children}) => {

    const Wrapper = styled.div`
        padding: 0 20px;
        width: 100%;
        @media (min-width: 768px) {
            padding: 0 60px;
        }
    `;

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

export default ContainerEz;

class BaseTemplateContainer 更改儿童道具时不会重新渲染

class BaseTemplateContainer extends Component {
    state = {

    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

export default BaseTemplateContainer;

Answer 1

首先，您的样式组件应该像这样位于组件之外

const Wrapper = styled.div`
    padding: 0 20px;
    width: 100%;
    @media (min-width: 768px) {
        padding: 0 60px;
    }
`;

const ContainerEz = ({children}) => {

    return (
        <Wrapper>
            {children}
          <BaseTemplateContainer children={children} /> call this inside here
        </Wrapper>
    );
}

export default ContainerEz;

然后将孩子传递给BaseTemplateContainer ，当它使用不同的道具重新渲染时，它们将显示