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

Question

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

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 的 Reflux 存储数据渲染

Reflux store data rendering with line breaks and tag interpolation ES5

reactjs

refluxjs