Question

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

Answer 1

首先，看看

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

Answer 2

您拥有的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 };
},

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

2 个答案: