Question

我不想使用Babel / ES6因为原因。我一直在看反应/回流的egghead.io视频，并在这里有一个组件我正在渲染。它连接到randomuser API并将10个用户拉入商店，当商店更新时，它将用户数据呈现到页面上。使用视频中显示的ES6代码，它允许很好地插入标签，所以但在我的情况下，我只是使用lodash作为_.map，操作稍有不同，我无法找到渲染标签插值甚至行的方法中断，因为React将元素呈现为一个父标记的所有子元素都包含在其自己的span标记内。

呈现的代码如下所示： react rendered output

我的代码在这里： var React = require（＆＃39; react＆＃39;）; var Reflux = require（＆＃39;回流＆＃39;）; var request = require（＆＃39; superagent＆＃39;）; var _ = require（＆＃39; lodash＆＃39;）;

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视频也是一流的，我必须给予应有的信用！

Answer 1

就个人而言，我试图避免在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>
          )

}

使用换行符和标签插值反馈商店数据呈现ES5

1 个答案: