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>。如果我使用包装器标签，它将破坏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>中渲染它们。前面提到的主题讨论了允许组件返回多个顶级组件的危险，尽管他们显然决定支持它（在未来版本中为某些用例调用它＆＃34;片段＆＃34;）。

Answer 2

反应限制不可能，你应该返回一个DOM元素。

我还认为你应该重组你的组件，不是逻辑组件不是单个li，我认为基础数据结构不合理

Answer 3

您将始终需要为多个节点设置包装器，因为render需要返回单个DOM组件。我总是只使用<div> ... </div>并且在大多数情况下都很好，除非我需要更具体的东西。

Answer 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>作为＆＃34; CSS-transparent＆＃34;我希望存在的元素，然后通过js

手动移动它的子元素

是否有HTML＆＃34;虚拟＆＃34;标记以分组其他元素而不干扰父子CSS规则？

4 个答案: