反応成分に画像を追加

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

投稿コンポーネントに画像を追加するにはどうすればよいですか？私はそれをブラウザで[オブジェクト]としてレンダリングしていますか？

Answer 1

あなたの投稿（および投稿リスト）コンポーネントはちょっと変わっています。マークダウンに変換しようとしていますか？または、なぜあなたは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> 
    ); 
    } 
});