如何避免反应过程中的额外包装 < div > ？

今天我开始学习 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中增加了这种可能性

从 反应16.2开始，你可以这样做:

render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
89646 次浏览
小开

您将无法删除这个 div元素，React.render ()需要返回一个有效的 DOM 节点。

小开
最佳答案

在 React version (16.0)] 1中删除了这个要求，所以现在您可以避免使用那个包装器。

您可以使用 React. Fragment 来呈现一个元素列表，而无需创建父节点，官方示例如下:

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

详情请浏览: 碎片

小开

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

小开

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

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

如果您使用的是16.2.0版本之前的 React 版本，也可以使用 <React.Fragment>...</React.Fragment>代替:

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

原文:

React v16.0引入了在呈现方法中返回元素数组，而不用将其包装在 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 添加一个特殊的片段语法 不需要钥匙。

小开

你可使用:

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

详情请参阅 这份文件。

小开

以下是呈现“透明”组件的一种方法:

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>

enter image description here

小开

这仍然是必需的 ，但是 < em > React 现在确保在不创建额外 DOM 元素的情况下创建元素。

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

请参阅 这个新的用于 createElement 的 api 文档

CreateElement : 创建并返回给定类型的新 React 元素。类型参数可以是标记名字符串(如“ div”或“ span”)、 React 组件类型(类或函数)、 或者反应片段类型。

这里是正式的例子，参考 反应，碎片。

render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</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>
})
小开

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

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

我知道这个问题已经得到了回答，你当然可以使用 React。片段，它不会创建一个节点，但是可以像 div 一样对东西进行分组。

另外，如果你想找点乐子，你可以实现一个 React 模式(学到很多东西) ，它可以去掉额外的 div，为此，我真的很想分享一个很棒的视频，告诉你如何在 React 代码本身上做到这一点。

Https://www.youtube.com/watch?v=as41y_eynru

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


提交答案