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

IT技术 javascript reactjs
2021-02-25 19:57:02

今天我开始学习 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 操作的情况下，最好和最简单的解决方法是什么？

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

从React 16.2 开始，你可以这样做：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
6个回答

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

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

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

更多信息：片段

自 2017 年 9 月 26 日发布，参见reactjs.org/blog/2017/09/26/react-v16.0.html
2021-04-22 19:57:02
好消息德米特里乌里扬内茨。有没有计划的发布日期？
2021-05-02 19:57:02
你也可以使用简写：<> </> 而不是 <React.Fragment></React.Fragment>
2021-05-17 19:57:02

2017 年 12 月 5 日更新：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 添加一个不需要键的特殊片段语法。

@ThulaniChivandikwa 你介意表达你对速记语法的疑虑吗？
2021-05-05 19:57:02
我认为这更多是关于空标签在 JSX 中很奇怪的概念并且不是很直观，除非您确切地知道它的作用。
2021-05-10 19:57:02
<></> 的新速记语法很棒。然而，我仍然有很多复杂的感觉。
2021-05-15 19:57:02

您可以使用：

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

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

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

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

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

我在你的包裹上贴了一个问题，你能看看吗？谢谢
2021-05-16 19:57:02
其它你可能感兴趣的问题
上一篇Javascript - 从对象中删除未定义的字段 下一篇如何从 vue.js 中的父级访问子方法