如何避免React中的额外包装？
今天我开始学习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>
我不是一个非常高兴的问题，这个问题迫使我将所有内容都打包在一个div“DeadSimpleComponent”中。在没有显式DOM操作的情况下，最好且简单的解决方法是什么？
2017年7月28日更新：React的维护人员在React 16 Beta 1中增加了这种可能性
自React 16.2以来，您可以这样做：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
共有3个答案
您可以使用：
render(){
return (
<React.Fragment>
<div>Some data</div>
<div>Som other data</div>
</React.Fragment>
)
}
有关更多详细信息，请参阅本文档。
更新2017-12-05： React v16.2.0现在完全支持片段渲染，改进了对从组件渲染方法返回多个子元素的支持，而无需在子元素中指定键：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
如果您使用的是v16.2.0之前的React版本，也可以使用
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添加一个不需要键的特殊片段语法。
这个要求在React版本（16.0）] 1中被删除了，所以现在您可以避免这个包装。
您可以使用React.Fragment呈现元素列表，而无需创建父节点，官方示例：
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
更多信息：碎片
-
此外，我不想将开发人员从ProjectManager转移到JavaProjectManager，因为我有更多从ProjectManager扩展的类，需要开发人员。
-
本文向大家介绍在React中如何避免不必要的render？相关面试题，主要包含被问及在React中如何避免不必要的render？时的应答技巧和注意事项，需要的朋友参考一下 shouldComponentUpdate、memoization、PureComponent
-
问题内容： 我正在多线程环境中聚合键的多个值。密钥未知。我以为我会做这样的事情： 我看到的问题是，每次运行此方法时，我都需要创建一个新的实例，然后将其丢弃（在大多数情况下）。这似乎是对垃圾收集器的不合理滥用。是否有更好的，线程安全的方法来初始化这种结构而不必使用该方法？我对使该方法不返回新创建的元素的决定感到惊讶，并且对缺少除非被要求（可以这么说）实例化实例的延迟的方法感到惊讶。 问题答案： Ja
-
我最近开始将样式化组件与React一起使用，我不确定我是否正确地处理了一个不断重复出现的特定情况。 假设我有一个非常简单的组件，比如，它只需要非常多的样式和一些给定的内容。我现在要处理的事情如下： 我发现首先定义基本组件，如，只针对样式，然后再定义另一个组件，它接受道具并使用该样式组件。 有没有更短的方法只在一个组件中完成这两个任务？我希望能有一些像... ...但那似乎不起作用。
-
目前，我正在尝试使用Java 9和javax开发一些代码。编辑xml文件的xml库（对于我的任务都是必需的），我在添加子节点时遇到了一些奇怪的问题。 这是XML文件： 我想编辑它构建如下内容： 现在，代码的第一次运行在<代码> 这是运行程序2次后生成的XML。如您所见，它在<代码> 在更新文件之前想知道这些节点的内容是什么，我写了下一段代码： 第一次执行： 第二次执行： 第三次执行 最后，这是Ja
-
我使用Java实现了很多Selenium测试—有时，我的测试会因为StaleElementReferenceException而失败。 你能建议一些使测试更稳定的方法吗？