带有换行符和标签插值 ES5 的 Reflux 存储数据渲染

Question

由于一些原因，我还不想使用 Babel/ES6。我一直在观看关于 react/reflux 的 egghead.io 视频，并在这里渲染了一个组件。它连接到 randomuser API 并将 10 个用户拉入商店，当商店更新时，它将用户数据呈现到页面上。使用视频中显示的 ES6 代码，它允许对标签进行很好的插值，因此，但在我的情况下，我只是使用 lodash 作为 _.map，其操作方式略有不同，我无法找到渲染标签插值甚至线条的方法中断，因为 React 将元素呈现为包含在其自己的 span 标签中的一个父标签的所有子标签。

渲染后的代码如下：

我的代码在这里： var React = require('react'); var 回流 = 要求（'回流'）; 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 的视频也是一流的，我必须在应得的地方给予赞扬！

Answer 1

就我个人而言，我尽量避免在 JSX 标签中进行插值。 JSX 为您提供了一个非常可靠的 API 来构建 DOM 元素！在这种情况下，我会这样做：

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>
          )

}