如何避免额外包装< div>在React？ [英] How to avoid extra wrapping <div> in React?
问题描述
今天我开始学习ReactJS并在一小时后遇到问题..
我想插入一个在页面div内有两行的组件。我在下面做的简化示例。
Today I have started learning ReactJS and after an hour faced with the problem.. I want to insert a component which has two rows inside a div on the page.A simplified example of what I am doing below.
我有一个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>
)
}
....
以下我正在调用render：
And below I am calling render:
ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));
生成的HTML如下所示：
Generated HTML looks like this:
<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操作，最简单的解决方法是什么？
The problem that I am not a very happy that React forcing me to wrap all in a div "DeadSimpleComponent". What is the best and simple workaround for it, without explicit DOM manipulations?
更新7/28/2017：React的维护人员在React 16 Beta中添加了这种可能性1
由于 React 16.2 ，你可以这样做：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
推荐答案
此要求已在React中删除版本（16.0）] [1]，所以现在你可以避免这个包装。
This requirement was removed in React version (16.0)][1], so now you are able to avoid that wrapper.
你可以使用React.Fragment来渲染元素列表而不创建父元素节点，官方示例：
You can use React.Fragment to render a list of elements without creating a parent node, official example:
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
更多信息：
https://reactjs.org/docs/fragments.html
这篇关于如何避免额外包装< div>在React？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
