带换行符和标签插值的回流存储数据呈现ES5
金亨利14
我仍然不想使用Babel / ES6，因为原因。我一直在观看关于react / reflux的egghead.io视频，并在此处渲染一个组件。它连接到randomuser API，并将10个用户拉入商店，当商店更新时，它将用户数据呈现到页面上。视频中显示了ES6代码，因此可以很好地标记标签，因此在我的情况下，我只是将lodash用作_.map，它的操作方式略有不同，因此我无法找到一种方法来渲染标签插值甚至行这会中断，因为React将元素渲染为一个父标记的所有子代包含在其自己的span标记内。
呈现的代码如下所示：
我的代码在这里：var React = require（'react'）; var Reflux = require（'reflux'）; var request = require（'superagent'）; var _ = require（'lodash'）;
var store = Reflux.createStore({
data: {users:[]},
init: function(){
request
.get("http://api.randomuser.me/?results=10")
.end(function(err,res){
if(err){
console.log(err)
}else {
var FirstName = res.body.results[0].user.name.first;
var LastName = res.body.results[0].user.name.last;
var picture = res.body.results[0].user.picture.thumbnail;
store.trigger({users:res.body.results})
}
});
},
getInitialState(){
return this.data;
}
});
var Name = React.createClass({
mixins:[Reflux.connect(store)],
render: function(){
return(
<div>
{_.map(this.state.users,function(n){
fName=n.user.name.first
lName=n.user.name.last
picture = n.user.picture.thumbnail;
return ""+fName+" "+lName + " " + picture
})
}
</div>
)
}
});
React.render(<Name />, document.getElementById('users'));
任何建议或意见，将不胜感激！egghead.io视频也是一流的，我必须归功于应得的！
劳劳
就个人而言，我尽量避免在JSX标签中进行插值。JSX为您提供了用于构建DOM元素的强大API！在这种情况下，我会做这样的事情：
render: function() {
var userElements = _.map(this.state.users,function(n){
var fName=n.user.name.first
var lName=n.user.name.last
var pictureURL = n.user.picture.thumbnail;
return (
<div className='user'>
<span className='first-name'>{fname}</span>
<span className='last-name'>{lname}</span>
<img className='picture' src={pictureURL}></img>
</div>
)
})
return (
<div className='user-container'>
{userElements}
</div>
)
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Vue.js：带换行符的字符串插值
- 2
如何显示带有带换行符的文本的标签？
- 3
带换行符的列名
- 4
带列表的换行符
- 5
带换行符的grep
- 6
当文件可以包含带换行符的数据或不带换行符的数据时，预览CSV数据
- 7
用于水平换行符的HTML5标签
- 8
带有换行符的标签href数据
- 9
Swift标签中的换行符和行数（以编程方式）
- 10
关于 RegExp 匹配、HTML 标签和换行符的困惑
- 11
在数据库中存储实际换行符
- 12
从文本区域存储换行符和缩进
- 13
从文本区域存储换行符和缩进
- 14
在文本插值 (Ruby) 中使用换行符时如何防止转义
- 15
在5个逗号分隔值之后插入换行符
- 16
从.CSV的SAS导入，带换行符
- 17
在换行符中拆分值重写键和值
- 18
pyparsing和换行符
- 19
换行符和PyQt
- 20
换行符和StringIO
- 21
换行符和PyQt
- 22
R read.csv，带逗号分隔符和换行符
- 23
带换行符/回车符的简单HTML和CSS工具提示
- 24
R read.csv，带逗号分隔符和换行符
- 25
如何使用Web浏览器在NoSQL数据中呈现换行符？
- 26
Corrgram变量标签中的换行符
- 27
脚本标签中的换行符
- 28
在离子标签内插入换行符
- 29
如何删除标签后的换行符
我来说两句