添加圖像來反應組件

Question

我正在學習React JS，並想讓我的手變髒。我正在學習構建簡單評論系統的文檔中的教程。

我已經按照該教程遵循類似的組件結構：

郵箱

• 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

Your 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> 
    ); 
    } 
}); 

這裏的主要區別是，你發下來需要作爲道具到的所有信息發佈組件，而不是其他元素。最好讓每個組件處理事物在其中的呈現方式。現在安置自己的組件可以是這樣的，而不是：

帖子：

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