是否有一个HTML文件；“哑巴”；标记对其他元素进行分组而不干扰父子CSS规则？

我正在使用Bootstrap，它定义了一组CSS规则。我试图使用React来呈现我的应用程序，但它总是需要一个包装器元素，我不能仅仅呈现一个元素数组

这是无效的：

class MyClass extends React.Component {
    render() {
        return (
            <li></li>
            <li></li>
        );
    }
}

类MyClass扩展了React.Component{
render（）{
返回(


);
}
}

但这是：

class MyClass extends React.Component {
    render() {
        return (
            <ul>
                <li></li>
                <li></li>
            </ul>
        );
    }
}

类MyClass扩展了React.Component{
render（）{
返回(




);
}
}

在我的具体案例中，我已经有了一个

外部，我只需要在内部渲染很多

。如果我使用包装标签，它将打破引导规则

是否有一些虚拟的HTML标记来执行此操作？若否，原因为何

---

我会更好地解释我的问题。我有这样的结构（它是一个引导导航栏）：

菜单1


菜单1项目1


菜单1第2项




反应菜单

为了创建它，我正在做：

class MyComponent extends React.Component {
    render() {
        let x = [];
        for (let lang of langlist) {
            x.push(
              <li>
                ..stuff..
              </li>
            );
        }

        return (
            <something>
                {x}
            </something>
        );
    }
}

类MyComponent扩展了React.Component{ render（）{ 设x=[]； for（让lang代替langlist）{ x、 推(

东西

); } 返回( {x} ); } } 我还试着这样重组它：

<ul class="nav navbar-nav navbar-right">
  ...

  <!-- now, the following is the React component I want to add -->
  <li class="dropdown" id="my-react-component"></li>
</ul>

// ugly hack because of react limitation
let x = document.getElementsByTagName("something");
for (let y of x) {
    while (y.childNodes.length > 0) {
        y.parentNode.appendChild(y.childNodes[0]);
    }
}

...

以及：

类MyComponent扩展了React.Component{ render（）{ 设x=[]； for（让lang代替langlist）{ x、 推(

东西

); } 返回( 反应菜单

{x}

); } }

---

但是正如您所看到的，我需要另一个包装器元素，如果我想保持角度和React，我不能这样做。

React限制是不可能的，您应该返回一个DOM元素

---

我还认为你应该重新构造你的组件，不是一个逻辑组件，它不是一个单一的

li

，我还认为底层数据的结构不是很好不可能有反应限制，你应该返回一个DOM元素

---

我还认为你应该重新构造你的组件，这不是一个逻辑组件，不是一个单一的

li

，我还认为底层数据的结构不是很好的你总是需要一个多节点的包装器，因为

render

需要返回一个DOM组件。我总是只使用

由于
render
需要返回单个DOM组件，所以您将始终需要为多个节点提供包装。我总是只使用
大多数时候都可以，除非我需要更具体的东西。
现在不可能，但是

就我个人而言，我认为拥有一个能够呈现多个
项目的组件并不明智。更高级别的组件（呈现
的组件）应负责项目的组成。您所要做的就是将它们组合成一个数组，并在
中渲染它们。前面提到的线程讨论了允许组件返回多个顶级组件的危险，尽管他们显然决定在将来的版本中为某些用例支持它（称之为“片段”）

就我个人而言，我认为拥有一个能够呈现多个
项目的组件并不明智。更高级别的组件（呈现
的组件）应负责项目的组成。您所要做的就是将它们组合成一个数组，并在
中渲染它们。前面提到的线程讨论了允许组件返回多个顶级组件的危险，尽管他们显然决定在将来的版本中为某些用例无论如何支持它（称之为“片段”）。
最后，即使可能在即将发布的React版本中也支持它，我是这样解决问题的：

<ul class="nav navbar-nav navbar-right">
  ...

  <!-- now, the following is the React component I want to add -->
  <li class="dropdown" id="my-react-component"></li>
</ul>

// ugly hack because of react limitation
let x = document.getElementsByTagName("something");
for (let y of x) {
    while (y.childNodes.length > 0) {
        y.parentNode.appendChild(y.childNodes[0]);
    }
}

因此，我只是使用
作为我希望存在的“CSS透明”元素，然后通过js手动移动其子元素，最后，即使可能在即将发布的React版本中这样做，我还是解决了如下问题：

<ul class="nav navbar-nav navbar-right">
  ...

  <!-- now, the following is the React component I want to add -->
  <li class="dropdown" id="my-react-component"></li>
</ul>

// ugly hack because of react limitation
let x = document.getElementsByTagName("something");
for (let y of x) {
    while (y.childNodes.length > 0) {
        y.parentNode.appendChild(y.childNodes[0]);
    }
}

所以我只是使用
作为我希望存在的“CSS透明”元素，然后通过js手动移动它的子元素
是的，但是如果我使用
ul>div>li
而不是
ul>li
的话，引导的CSS规则将不起作用。是的，在这种情况下，你必须更好地构造你的组件以拥有更坚实的DOM。我想让一个组件同时处理你的
ul
s和你的
li
s。是的，但我只想在我现有的应用程序中使用React组件，而不是将整个应用程序移植到React。。。没有办法解决这个问题是很愚蠢的。如果你从组件外部处理你的
li
，然后只使用组件来呈现它的内容呢？这在你的应用程序中有意义吗？是的，但是如果我选择
ul>div>li
而不是
ul>li
的话，引导的CSS规则将不起作用。是的，在这种情况下，你必须更好地构造组件，使其具有更坚实的DOM。我认为让一个组件处理你的
ul
s