Рендеринг данных хранилища Reflux с разрывами строк и интерполяцией тегов ES5

Я пока не хочу использовать Babel/ES6 по причинам. Я смотрел видеоролики egghead.io о реакции/рефлюксе, и здесь есть компонент, который я рендерю. Он подключается к API randomuser и привлекает 10 пользователей в магазин, когда магазин обновляется, он отображает пользовательские данные на странице. С кодом ES6, показанным в видео, он позволяет хорошо интерполировать теги, так что, но в моем случае я просто использую lodash как _.map, который работает немного по-другому, и я не могу найти способ отобразить интерполяцию тегов или даже строку прерывается, поскольку React отображает элементы как все дочерние элементы одного родительского тега, содержащиеся внутри его собственных тегов span.

Отрендеренный код выглядит следующим образом:реагировать на отрендеренный вывод

и мой код здесь: var React = require('react'); var Рефлюкс = требуют('рефлюкс'); var request = 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 на высшем уровне, я должен отдать должное!


reactjs refluxjs
person kinghenry14    schedule 07.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Лично я стараюсь избегать интерполяции в тегах 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>
          )

}
person raorao    schedule 07.06.2015
comment
да, это решение сработало на 100%, просто fname соответствовало fName. я должен был подумать о том, чтобы извлечь это в свою собственную переменную, но я думаю, после стольких попыток вы застряли в том же образе мышления. благодарю вас!!! - person kinghenry14; 08.06.2015