반응 성분에 이미지 추가

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

어떻게하면 게시 구성 요소에 이미지를 추가 할 수 있습니까? 나는 그것을 브라우저에서 [object]로 렌더링하려고합니까?

Answer 1

게시물 (및 포스트 목록) 구성 요소가 약간 이상합니다. 마크 다운으로 전환하려고하십니까? 왜 그런 리마커블을 사용하고 있습니까?

이 더 좋은 방법 (놀라운없이) 같이 보일 것입니다 :

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