Добавление изображения для взаимодействия компонента

Question

Я изучаю React JS и хотел, чтобы мои руки были грязными. Я следую руководству в документах, которые строят упрощенную систему комментариев.

Я следовал сходную структуру компонента, что учебник следующим образом:

Postbox

• PostList
  • Сообщение

Вот это main.js :

var Post = React.createClass({ 
     rawMarkup: function() { 
     var md = new Remarkable(); 
     var rawMarkup = md.render(this.props.children.toString()); 
     return { 
      __html: rawMarkup 
     }; 
     }, 

     render: function() { 
     return (< div className = "post" > 
      < h2 className = "commentTitle" > { 
      this.props.title 
      } < /h2> < span dangerouslySetInnerHTML = { this.rawMarkup() }/> < /div> 
     ); 
     } 
    }); 

    var PostList = React.createClass({ 
      render: function() { 
      var postNodes = this.props.data.map(function(post) { 
       return (< Post title = { 
        post.title 
       } > By: { 
        post.by 
       } < img src = { 
        'placeholder_path' 
       } 
       /> </Post >); 
      }); 
      return (< div className = "postList" > { 
       postNodes 
       } < /div>); 
      } 
      }); 

     var PostBox = React.createClass({ 
      loadPostsFromServer: function() { 
      $.ajax({ 
       url: this.props.url, 
       dataType: 'json', 
       cache: false, 
       success: function(data) { 
       this.setState({ 
        data: data 
       }); 
       }.bind(this), 
       error: function(xhr, status, err) { 
       console.log("error " + data); 
       console.error(this.props.url, status, err.toString()); 
       }.bind(this) 
      }); 
      }, 
      getInitialState: function() { 
      return { 
       data: [] 
      }; 
      }, 
      componentDidMount: function() { 
      this.loadPostsFromServer(); 
      setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
      }, 
      render: function() { 
      return (< div className = "postBox" > 
       < PostList data = { 
       this.state.data 
       } 
       /> </div > 

      ); 
      } 
     }); 

     ReactDOM.render(< PostBox url = "/api/posts" 
      pollInterval = { 
      2000 
      } 
      />, 
      document.getElementById('content') 
     ); 

Как добавить изображение к компоненту Post? Я получаю это в качестве [объекта] в браузере?

Answer 1

Компонент Post Post (PostList) немного странный. Вы пытаетесь преобразовать его в уценку? Или почему вы используете Remarkable?

Лучший способ это (без Примечателен), будет выглядеть примерно так:

PostList:

var PostList = React.createClass({ 
    render: function() { 
    var postNodes = this.props.data.map(function(post) { 
     return (
     <Post 
      title={post.title} 
      author={post.by} 
      imageSrc='placeholder_path' 
     /> 
    ); 
    }); 
    return ( 
     <div className="postList"> 
     {postNodes} 
     </div> 
    ); 
    } 
}); 

Основное различие в том, что вы низвели всю необходимую информацию в качестве реквизита к Компонент Post, а не другие элементы. Лучше позволить каждому компоненту заботиться о том, как в нем отображаются вещи. Теперь Опубликуйте компонент может выглядеть следующим образом, вместо:

Сообщение:

var Post = React.createClass({ 
    render: function() { 
    return (
     <div className="post"> 
     <h2 className="commentTitle">{this.props.title}</h2> 
     <span>By: {this.props.author}</span> 
     <img src={this.props.imageSrc} /> 
     </div> 
    ); 
    } 
});