由于某些原因,我还不想使用 Babel/ES6。我一直在观看关于 react/reflux 的 egghead.io 视频,并在这里渲染了一个组件。它连接到 randomuser API 并将 10 个用户拉入商店,当商店更新时,它将用户数据呈现到页面上。使用视频中显示的 ES6 代码,它允许对标签进行很好的插值,因此,但在我的情况下,我只是使用 lodash 作为 _.map,其操作方式略有不同,我无法找到渲染标签插值甚至线条的方法中断,因为 React 将元素呈现为包含在其自己的 span 标签内的一个父标签的所有子标签。
呈现的代码如下所示:
我的代码在这里: var React = require('react'); var 回流 = 要求('回流'); var request = require('superagent'); var _ = 要求('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 视频也是一流的,我必须在应得的地方给予赞扬!