为什么 ReactJS 将我的图像作为对象返回？答案

【问题标题】：Why is ReactJS returning my images as an object?为什么 ReactJS 将我的图像作为对象返回？
【发布时间】：2016-06-18 20:49:14
【问题描述】：

我正在通过教程学习 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

【问题讨论】：

你能告诉我们this.props.data的样子吗？
抱歉，你问的是 json 是什么样子的？ github.com/MickyCook/react-app/blob/master/comments.json

标签： html json node.js object reactjs

【解决方案1】：

在您拥有的Comment 组件中

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

【讨论】：

使用 react-dom 能解决这个问题吗？
尝试像这样打印结果console.log(ReactDOM.renderToString(this.props.children))
如果你能像这样<div> {comment.text} <img src={comment.image} alt="none"/></div> 包装孩子们，只是为了确保 react-dom 工作良好
让我知道结果，希望对您有所帮助
我按照你的建议包装了它们，我需要以不同的方式包含 react-dom 吗？我正在使用头部的cdn。是的，控制台错误是：TypeError: ReactDOM.renderToString is not a function，另一个是：Cannot read property '_currentElement' of null

【解决方案2】：

首先来看

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，但我不确定。

【讨论】：

完全包裹在单个标签中，有效