Javascript 创建一个div（或其他元素），它的行为只是作为一个容器（没有其他功能）

我希望创建一个“空”容器div，其唯一目的是对子元素进行分组。换句话说，这个容器应该对页面中的其他元素没有影响

我之所以需要这样一个容器，是为了在不影响页面布局和样式的情况下对

React

元素进行分组

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

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

const reduxobservators=函数（道具）
{
返回(
);
}
const AppContainer=函数（道具）
{
返回(
);
}

以上只是一个粗略的例子，但它有助于证明我正在努力实现的目标

• 表示我们应用程序的可见部分（即它呈现DOM元素）

• 表示我们应用程序的不可见部分（即呈现

  null

  ）

包装这些组件（在我们的

帮助下），可能是

或其他元素的子元素

如何设计

，使其对周围/子元素的布局/样式没有影响

---

我曾想过通过

all:inherit“克隆”其父元素边距：0px；填充：0px

可能会绕过这个问题，但我担心会出现其他问题

---

理想情况下，如果有一种方法将样式和布局级联到第一个“非空”祖先，那将是最好的解决方案。例如，如果我们有一个

->

->

层次结构。。假设

有

宽度：100%；高度：100%

，它将从

计算这些属性和任何其他布局/样式，完全忽略

。但我一直没能找到一个方法来做到这一点

---

我还考虑将

div设置为

位置：绝对

这样它的布局就不会影响它的子级，但这也不能涵盖所有情况

---

---

因此，我求助于您，希望我正在尝试做的事情可能会有一些解决方案。

如评论中所述，如果您尝试这样做是因为需要从render方法返回单个元素，那么React 16中不再需要该元素

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

使用

span

标记

span

标记不做任何事情，就像

div

一样，只是

div

标记将子项显示为块，span以内联方式显示

使用HTML5

部分

标记

---

如注释中所述，如果您试图这样做是因为需要从render方法返回单个元素，那么React 16中不再需要该元素

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

使用

span

标记

span

标记不做任何事情，就像

div

一样，只是

div

标记将子项显示为块，span以内联方式显示

使用HTML5

部分

标记

---

如果您使用的是

React

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

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

然后你可以做：

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

const-AppContainer=函数（道具）{
返回(
);
}

如果使用的是

React

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

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

然后你可以做：

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

const-AppContainer=函数（道具）{
返回(
);
}

我相信您正在尝试这样做，因为React希望您从render方法返回单个元素。如果是这样的话，您不需要这样做，因为react 16中不推荐该要求。我相信您正在尝试这样做，因为react希望您从render方法返回单个元素。如果是这样的话，您就不需要这个，因为react 16.Hmm.中不推荐该需求。。我正在使用babel jest的

react 16.0.0

。编译时，我得到一个错误，即“相邻的JSX元素必须包装在一个封闭的标记中。”。您需要使用片段或简单地将元素作为数组返回。看这里，嗯。。我正在使用babel jest的

react 16.0.0

。编译时，我得到一个错误，即“相邻的JSX元素必须包装在一个封闭的标记中。”。您需要使用片段或简单地将元素作为数组返回。请参见此处，

React.Fragment

为我返回

undefined

。但是您的

解决方案工作得非常好，从'React'导入{Fragment}，并使用Fragment作为组件来包装子组件

React。Fragment

为我返回

未定义的
。但是您的
解决方案可以运行wondersimport React，{Fragment}来自“React”，并使用Fragment作为组件来包装子组件