是否有一个 HTML“虚拟”标签可以在不干扰父子 CSS 规则的情况下对其他元素进行分组？答案

【问题标题】：Is there an HTML "dummy" tag to group other elements without interfering with parent-child CSS rules?是否有一个 HTML“虚拟”标签可以在不干扰父子 CSS 规则的情况下对其他元素进行分组？
【发布时间】：2017-02-18 01:44:00
【问题描述】：

我正在使用 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>s。如果我使用包装标签，它会破坏 Bootstrap 规则。

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

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

<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，我就做不到。

【问题讨论】：

标签： html css reactjs

【解决方案1】：

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

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

【讨论】：

我想过只返回一个<ul>，里面有<li>s，但我很快注意到问题只是被“转移到了上面”：<ul> 元素不是“唯一的孩子” "，它是 <a> 元素的兄弟（因为 Bootstrap）所以我现在需要一起渲染 <a> 和 <ul>，但这意味着有另一个包装器元素......我只想在我的现有应用程序，我（还）不想将我的整个应用程序移植到 React
如果没有看到您的更多代码，我有点难以理解。听起来您正在尝试进行下拉菜单？你看过React-Bootstrap，它使用常规的引导 CSS 和 React 组件吗？
我更新了我的问题。谢谢你的链接，我去看看。

【解决方案2】：

因为render 需要返回单个 DOM 组件，所以您总是需要为多个节点提供一个包装器。我总是只使用<div> ... </div> 并且大部分时间都很好，除非我需要更具体的东西。

【讨论】：

是的，但是如果我使用 ul > div > li 而不是 ul > li，则 Bootstrap 的 CSS 规则将不起作用
是的，在这种情况下，您必须更好地构建组件以拥有更可靠的 DOM。我认为有一个组件可以同时处理您的uls 和您的lis。
是的，但我只想在我现有的应用程序中使用 React 组件，而不是将整个应用程序移植到 React ......这真是愚蠢，没有办法解决这个问题
那么，如果您从该组件外部处理您的li 并仅使用该组件来呈现其内容怎么办？这对您的应用有意义吗？

【解决方案3】：

react 限制是不可能的，你应该返回单个 DOM 元素。

我也认为你应该重组你的组件，不是逻辑一个不是单个li的组件，我也认为底层数据结构不好

【讨论】：

【解决方案4】：

最后，即使有可能使用即将发布的 React 版本来做到这一点，我还是这样解决了这个问题：

// 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]);
    }
}

所以我只是使用<something></something> 作为我希望存在的“CSS-transparent”元素，然后通过 js 手动移动它的子元素

【讨论】：