爲什麼ReactJS將我的圖像作爲對象返回？

我正在通過教程學習Reactjs。我正在嘗試添加圖片上傳功能，但我無法弄清楚。如果我這樣做：爲什麼ReactJS將我的圖像作爲對象返回？

var CommentList = React.createClass({ 
    render: function() { 
    var commentNodes = this.props.data.map(function(comment) { 
     return(
      <Comment author={comment.author} key={comment.id}> 
      {comment.text} 
       <img src={comment.image} alt="none"/> 
      </Comment> 
     ); 
    }); 
    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
});

React將圖像作爲[object Object]返回。我認爲這與ReactJS如何渲染HTML有關，但我無法弄清楚。 comment.image是從json文件加載的url路徑。該應用程序可以在這裏審查：https://polar-caverns-82946.herokuapp.com/，所有的代碼都可以在這裏看到：https://github.com/MickyCook/react-app

來源

2016-03-04 Mickey

你能告訴我們什麼'this.props.data'樣子？ – Populus

對不起，你在問什麼json的樣子？ https://github.com/MickyCook/react-app/blob/master/comments.json – Mickey

首先，看看

return(
    <Comment author={comment.author} key={comment.id}> 
    {comment.text} 
     <img src={comment.image} alt="none"/> 
    </Comment> 
);

您要在不關閉標籤返回的組件（評論）。

return (
    <div> 
    <Comment author={comment.author} key={comment.id}/> 
    <p>{comment.text}</p> 
    <img src={comment.image} /> 
    </div> 
)

你需要在一個單一的元素來包裝的一切，因此額外的<div>。您可能還必須危險地設置圖像src，但我不確定。

在 Comment組件

來源

2016-03-04 23:04:02 AJFarkas

它完全包裹在一個標記中，這是有效的 –

我試圖設置它危險的運氣沒有。 – Mickey

你有

var Comment = React.createClass({ 
rawMarkup: function() { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return { __html: rawMarkup }; 
},

但你不能這樣做，孩子組件轉換爲字符串。

你應該使用react-dom

var Comment = React.createClass({ 
rawMarkup: function() { 
    var rawMarkup = marked(ReactDOM.renderToString(this.props.children), {sanitize: true}); 
    return { __html: rawMarkup }; 
},

來源

2016-03-04 23:17:00

會使用react-dom修復這個問題嗎？ – Mickey

我試過了，沒有什麼變化 – Mickey

很奇怪！控制檯日誌中是否有錯誤？ –

爲什麼ReactJS將我的圖像作爲對象返回？

回答

相關問題