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

如何将图像添加到Post组件？我在浏览器中将其呈现为[object]？

Answer 1

你的Post（和PostList）组件有点奇怪。你想把它转换成降价吗？或者你为什么这样使用Remarkable？

更好的方法（没有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>
    );
  }
});

这里的主要区别在于您将所有需要的信息作为道具发送到Post组件，而不是其他元素。最好让每个组件处理事物的呈现方式。现在你的Post组件看起来像这样：

发表：

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

添加图像到反应组件

1 个答案: