Question

我希望创造一个空洞的＆＃39;容器div，其唯一目的是对子元素进行分组。换句话说，此容器应对页面中的其他元素具有无效。

我需要这样一个容器的原因是为了在不影响页面布局和样式的情况下对React个元素进行分组。

const ReduxObservers = function(props)
{
    return (
        <EmptyContainer>
            <ReduxObserver1/>
            <ReduxObserver2/>
        </EmptyContainer>
    );
}

const AppContainer = function(props)
{
    return (
        <EmptyContainer>
            <App/>
            <ReduxObservers/>
        </EmptyContainer>
    );
}

以上只是一个粗略的例子，但它有助于展示我想要实现的目标。

<App>代表我们应用的可见部分（即呈现DOM元素）。
<ReduxObserver>代表我们应用的一个不可见部分（即呈现null）

<AppContainer>包装这些组件（在<EmptyContainer>的帮助下），可能是<body>的子项或其他元素。

如何设计<EmptyContainer>使其对周围/子元素的布局/样式没有影响？

我原本想过要<EmptyContainer>克隆＆＃39;它的父元素通过all: inherit;但是我预见到这种方法存在问题（例如父母有填充或边距的情况），这不会使它成为真正的副本。设置额外的margin: 0px; padding: 0px;可能会绕过这个问题，但我担心可能会出现其他问题。

理想情况下，如果有一种方法可以将样式和布局级联到第一个非空的＆＃39;祖先，这将是最好的解决方案。例如，如果我们有<parent> - ＆gt; <EmptyContainer> - ＆gt; <child>层次结构..如果我们假设<child>有width:100%; height:100%，它会从<parent>计算这些属性和任何其他布局/样式，忽略{{1}完全。但我还没有找到办法。

我还考虑将<EmptyContainer> div设置为<EmptyContainer>，以便它的布局不会影响它的孩子，但这并不能涵盖所有案例。

所以我转向你，希望可能有一些解决方案可以解决我想要做的事情。

Answer 1

如果您使用React 16，则可以使用片段，如下所示：

const AppContainer = function(props) {
    return (
        <React.Fragment>
            <App/>
            <ReduxObservers/>
        </React.Fragment>
    );
}

正如@stojkosd在评论中提到的，不要忘记import React, { Fragment } from 'react'。

如果你不能使用React 16，有一种方法可以定义一个组件，它可以作为包装器，但不会呈现任何标记。在这种情况下，组件通常称为Aux（来自辅助），它只会将其子项传递为props。这是组件的样子：

const Aux = (props) => (props.children);

然后你可以这样做：

const AppContainer = function(props) {
    return (
        <Aux>
            <App/>
            <ReduxObservers/>
        </Aux>
    );
}

Answer 2

如评论中所述，如果您尝试执行此操作是因为需要从render方法返回单个元素，则React 16中不再需要该元素。

如果没有，您可以使用以下方法（不是基于React btw）

使用span标记。 span标记不执行任何操作，只是作为div，但div标记将子项显示为块，并且span显示为内联。
使用HTML5 section代码。

创建一个行为简单为容器的div（或其他元素）（没有其他功能）

2 个答案: