html - 是否有一个 HTML "dummy"标签可以在不干扰父子 CSS 规则的情况下对其他元素进行分组？

Question

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

这是无效的:

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

但这是:

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

在我的具体情况下，我已经有一个 <ul>在外面，我只需要渲染很多 <li>在里面。如果我使用 wrapper 标签，它会破坏 Bootstrap 规则。

是否有一些虚拟 HTML 标记可以执行此操作？如果不是，为什么？

---

我会更好地解释我的问题。我有这个结构(它是一个 Bootstrap 导航栏):

<ul class="nav navbar-nav navbar-right">
  <!-- a bunch of <li> generated by AngularJS -->

  <!-- for example, the following my be generated: -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Menu 1</a>
    <ul class="dropdown-menu">
      <li>
        <a>Menu 1 Item 1</a>
      </li>
      <li>
        <a>Menu 1 Item 2</a>
      </li>
    </ul>
  </li>

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

为了创建它，我正在做:

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

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

我也试过这样重组它:

<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>

和:

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

        return (
            <a class="dropdown-toggle" data-toggle="dropdown">React Menu</a>
            <ul class="dropdown-menu">
                {x}
            </ul>
        );
    }
}

但是如您所见，我需要另一个包装器元素，如果我想保留 Angular 和 React，我无法做到这一点。

Answer 1

现在不可能，但是sometime in the future it will be .

就我个人而言，我不认为有一个组件可以呈现多个 <li>元素很聪明。更高级别的组件(呈现 <li> 的组件)应该负责元素的组合。您所要做的就是将它们组合成一个数组并将它们呈现在 <ul> 中。 .上述线程讨论了允许组件返回多个顶级组件的危险，尽管他们显然决定在未来的版本中为某些用例支持它(称之为“片段”)。