Question

今天我开始学习ReactJS，一小时后面临问题。我想插入一个在页面上div内有两行的组件。这是我在下面做的简单示例。

我有一个HTML：

<html>
..
  <div id="component-placeholder"></div>
..
</html>

渲染函数如下：

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

下面我叫做渲染：

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

生成的HTML如下所示：

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

我不是很高兴React强迫我把所有东西都包裹在div＆＃34; DeadSimpleComponent＆＃34;中。没有明确的DOM操作，它的最佳和简单的解决方法是什么？

更新7/28/2017：React的维护者在React 16 Beta 1中添加了这种可能性

自React 16.2以来，您可以这样做：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

Answer 1

此要求已在React版本（16.0）] [1]中删除，因此现在您可以避免使用该包装。

您可以使用React.Fragment呈现元素列表而无需创建父节点，官方示例：

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

更多信息： https://reactjs.org/docs/fragments.html

Answer 2

更新2017-12-05： React v16.2.0现在完全支持渲染片段，改进了对从组件渲染方法返回多个子节点的支持，而无需在子节点中指定键：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

如果您使用的是v16.2.0之前的React版本，则也可以使用<React.Fragment>...</React.Fragment>代替：

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

<强>原始

React v16.0引入了在render方法中返回一个元素数组，而不将它包装在div中：https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

目前，每个元素都需要一个密钥才能避免关键警告，但这可能会在以后的版本中更改：

将来，我们可能会向JSX添加一个特殊的片段语法不需要钥匙。

Answer 3

您可以使用：

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

有关详细信息，请参阅this documentation。

Answer 4

我创建了一个组件来包装没有DIV的子组件。它被称为影子包装器：https://www.npmjs.com/package/react-shadow-wrapper

Answer 5

使用[]，而不是（）来包装整个返回。

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

Answer 6

您将无法摆脱该div元素。 React.render（）需要返回一个有效的DOM节点。

Answer 7

这仍然是必需的， BUT 现在请确保创建元素而不创建其他DOM元素。

由于Reacts div方法需要一个createElement参数type，因此需要额外的包装（通常使用父either a tag name string (such as 'div' or 'span'), a React component type (a class or a function)）。但这是在他们引入React Fragment之前。

引用this NEW api doc for createElement

React.createElement ：创建并返回给定类型的新React元素。 type参数可以是标签名称字符串（例如'div'或'span'），React组件类型（类或函数），或React片段类型。

这是官方示例，请参见React.Fragment。

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Answer 8

这是渲染“transculent”组件的一种方法：

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

Answer 9

也有解决方法。下面的代码块无需React.Fragment即可生成片段。

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})

Answer 10

您可以通过使用newer versions of React中称为 React.Fragment 的介绍来实现此行为，该介绍使您可以返回多个元素而无需创建包装元素（即<div>）。代码如下所示：

render() {
  return (
    <React.Fragment>
      <Element1 />
      <Element2 />
    </React.Fragment>
  );
}

您可以阅读更多here。希望对您有所帮助！

Answer 11

我知道已经回答了这个问题，您当然可以使用React.Fragment，它不会创建节点，但让我们将div之类的东西分组。

此外，如果您想玩得开心，可以实现（并学到很多东西）一种React模式，该模式消除了多余的div，为此，我真的想分享一个很棒的视频，介绍如何在react代码基础上实现它本身。

https://www.youtube.com/watch?v=aS41Y_eyNrU

这当然不是您在实践中会做的事情，但这是一个很好的学习机会。

如何避免在React中额外包装<div>？

11 个答案: