Question

当前，我有2个关于容器包装的类，用于将内容作为子级呈现。仅当我使用 containerEz 类之类的样式化组件而不在 BaseTemplateContainer 类

中使用时，它才起作用

如果我想修复Class.Templates.children更改后重新渲染BaseTemplateContainer类，该怎么办？

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;

BaseTemplateContainer类在更改子项prop时不会重新渲染

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，当孩子用不同的道具重新放下时，他们会显示

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

1 个答案: