Kir*_*kov 84 javascript reactjs
今天我开始学习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 />
</>
);
}
小智 111
在React版本(16.0)] [1]中删除了此要求,因此现在您可以避免该包装.
您可以使用React.Fragment呈现元素列表,而无需创建父节点,官方示例:
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
更多信息:https: //reactjs.org/docs/fragments.html
Tom*_*Tom 46
更新 2017-12-05 :React v16.2.0现在完全支持渲染片段,并且改进了对从组件渲染方法返回多个子节点的支持,而无需在子节点中指定键:
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
由于目前<React.Fragment>...</React.Fragment>所有工具都不完全支持语法,因此现在也可以使用<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添加一个不需要密钥的特殊片段语法.
您可以使用:
render(){
return (
<React.Fragment>
<div>Some data</div>
<div>Som other data</div>
</React.Fragment>
)
}
有关详细信息,请参阅此文档.
小智 5
使用 []，而不是 () 来包装整个返回。
render: function() {
return[
<div className="DeadSimpleComponent__time">10:23:12</div >
<div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
]
}
| 归档时间： |
|
| 查看次数： |
42343 次 |
| 最近记录： |