Question

我正在创建一个可重用的组件，该组件应使所有Child元素在组件被调用的位置传递。我如何简单地使用这些孩子？

我在某处看到只需使用{...children}即可完成。
但是由于我的愚蠢，我无法找到该参考资料。

我知道也可以使用...props来完成。

我的可重用组件：

export const StyledComp = (props, ...children) => (
    <StyledComp className={(props.active) ? 'active ' : ''}>
        <StyledCompToggleButton onClick={props.toggle}>
            {(props.active) ? <FaIcon icon="times" /> : <FaIcon icon="user-tag" />}
        </StyledCompToggleButton>
        {(props.active) &&
            <StyledCompInner>
                {...children}
            </StyledCompInner>
        }
    </StyledComp>
);

我在哪里称呼我的组件：

<StyledComp active={this.state.active} toggle={this.toggleStyledComp}>
    <p>This element should be displayed</p>
</StyledComp>

StyledCompInner组件：

export const StyledCompInner = styled.div`
    background-color: #ccc;
    width: 100%;
    height: 100%;
`;

我希望显示我的组件，并在其中显示内容为This element should be displayed的p元素。

但是实际上我的组件没有显示p元素。

Answer 1

请尝试这个

<StyledCompInner> {props.children} </StyledCompInner>

和

确定StyledCompInner没有另一个<p>标签？嵌套的p标签无效。

如何传递父组件的所有子组件？

1 个答案: