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

逆天TomHarry2020-03-12

今天，我开始学习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“ DeadSimpleComponent”中。没有显式的DOM操作，什么是最佳且简单的解决方法？

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

从React 16.2开始，您可以执行以下操作：

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

Harry小胖古一2020/03/12 15:49:28

也有解决方法。下面的代码块无需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>
})

达蒙武藏2020/03/12 15:49:28

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

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

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

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

斯丁Jim2020/03/12 15:49:28

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

逆天米亚2020/03/12 15:49:28

您可以使用：

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

有关更多详细信息，请参阅此文档。

理查德Green2020/03/12 15:49:28

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

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

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

更多内容：片段

斯丁GO神乐2020/03/12 15:49:28

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

卡卡西Near2020/03/12 15:49:28

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer