Bild hinzufügen, um die Komponente zu reagieren

Question

Ich lerne React JS und wollte meine Hände schmutzig machen. Ich befolge das Tutorial in den Dokumenten, das ein einfaches Kommentarsystem erstellt.

Ich habe eine ähnliche Komponentenstruktur gefolgt, die das Tutorial folgt:

PostBox

• PostList
  • Beitrag

Hier ist die 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') 
     ); 

Wie füge ich der Post-Komponente ein Bild hinzu? Ich bekomme das als [Objekt] im Browser gerendert?

Answer 1

Ihre Post (und PostList) -Komponente ist ein bisschen komisch. Möchten Sie es in Markdown konvertieren? Oder warum benutzt du Remarkable so?

Eine bessere Möglichkeit dazu (ohne Bemerkenswerte), so etwas wie aussehen:

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

Der wesentliche Unterschied ist, dass Sie alle Informationen herabs benötigt als Requisiten an die Post-Komponente, anstatt andere Elemente. Es ist besser, wenn jede Komponente sich darum kümmert, wie die Dinge darin rendern. Jetzt kann Ihr Beitrag Komponente wie diese Stelle aussehen:

Beitrag:

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