Question

我的整个应用程序都是基于不同的反应类构建的，并显示如下：

MainLayout = React.createClass({
  render() {
    return (
      <div id="body">
        <Header />
        <main className="container">{this.props.content}</main>
        <Footer />
      </div>
    );
  }
});

我的所有前端都是在反应类中构建的，如下所示：

InsertData = React.createClass({
    insertToCollection(event) {
        event.preventDefault();
        console.log(this.state.message + " state med message");
        var content = Posts.find().fetch();
            Posts.insert({
                Place: $("post1").val(),
                Type: $("post2").val(),
                dateAdded: new Date(),
            });
    },

    handleChange(event) {
        this.setState({
            message: event.target.value
        })

        console.log(this.state + " mer state her");
        function insert(event) {
            event.preventDefault();
            console.log("added stuff"); 
        }
    },
    render() {
        return (
            <div>
                <form onSubmit={this.insertToCollection}>
                    <input type='text' placeholder="Select a restaurant" className="input-field" 
                    onChange={this.handleChange} id="post1"/>
                    <input type='text' placeholder="What type of food they have" className="input-field" 
                    onChange={this.handleChange} id="post2"/>
                    <button className="waves-effect waves-light btn btn-block" onChange={this.insert}> Submit </button>
                </form>
                <DisplayData />
            </div>
        );
    }
});

将数据插入我的收藏品工作正常。我想将插入的数据从<DisplayData />组件呈现到页面上：

DisplayData = React.createClass({
    render(){
        var posts = Posts.find().fetch();
        var postList = posts.map(function(posts){
            return posts; 
        })
        return <p> Your collection </p>
    }
});

我宁愿卡在这里，也不确定如何遍历集合并在列表结构中呈现它。到目前为止，这是我的收藏：

Posts = new Mongo.Collection('posts');

Posts.allow({
    insert: function(){
        return true; 
    }, 
    update : function(){
        return true; 
    },
    remove : function(){
        return true; 
    }
});

Answer 1

以下是如何解决此问题的演示：http://codepen.io/PiotrBerebecki/pen/bwmAvJ

我不确定posts集合的格式，但假设它只是一个常规数组，例如var posts = ['One', 'Two'];，您可以按如下方式呈现单个帖子：< / p>

var DisplayData = React.createClass({
    render(){
        var posts = ['One', 'Two'];

        var renderPosts = posts.map(function(post, index) {
            return (
              <li key={index}>{post}</li>
            ); 
        });

        return (
          <div>
            <p> Your collection </p>
            <ul>
              {renderPosts}
            </ul>
          </div>
        );
    }
});

以下是我的codepen的完整代码。

var InsertData = React.createClass({
    insertToCollection(event) {
        event.preventDefault();
        console.log(this.state.message + " state med message");
        var content = Posts.find().fetch();
            Posts.insert({
                Place: $("post1").val(),
                Type: $("post2").val(),
                dateAdded: new Date(),
            });
    },

    handleChange(event) {
        this.setState({
            message: event.target.value
        })

        console.log(this.state + " mer state her");
        function insert(event) {
            event.preventDefault();
            console.log("added stuff"); 
        }
    },
    render() {
        return (
            <div>
                <form onSubmit={this.insertToCollection}>
                    <input type='text' placeholder="Select a restaurant" className="input-field" 
                    onChange={this.handleChange} id="post1"/>
                    <input type='text' placeholder="What type of food they have" className="input-field" 
                    onChange={this.handleChange} id="post2"/>
                    <button className="waves-effect waves-light btn btn-block" onChange={this.insert}> Submit </button>
                </form>
                <DisplayData />
            </div>
        );
    }
});


var DisplayData = React.createClass({
    render(){
        var posts = ['One', 'Two'];

        var renderPosts = posts.map(function(post, index) {
            return (
              <li key={index}>{post}</li>
            ); 
        });

        return (
          <div>
            <p> Your collection </p>
            <ul>
              {renderPosts}
            </ul>
          </div>
        );
    }
}); 


ReactDOM.render(
  <InsertData />,
  document.getElementById('app')
);

Answer 2

您需要将posts作为道具传递给视图组件DisplayData，因此在您插入帖子后，您应该在InsertData组件中更新您的状态。实际上，如果您在服务中而不是组件本身进行插入登录会更好，但为了简单起见，您现在可以检查以下代码：

 InsertData = React.createClass({

  getInitialState: function() {
      return {posts: []}; // initialize the state of your component
    },

    insertToCollection(event) {
        event.preventDefault();
        console.log(this.state.message + " state med message");
        var content = Posts.find().fetch();
            Posts.insert({
                Place: $("post1").val(), // better to retrieve these values from state. You can use `handleChange` method to keep track of user inputs
                Type: $("post2").val(),
                dateAdded: new Date(),
            }, function(err, data){
            var posts = this.state.posts || [];
            posts.push(data);
            this.setState({posts: posts}); //after setting the state the render method will be called again, where the updated posts will be rendered properly
            });
    },

    handleChange(event) {
        this.setState({
            message: event.target.value
        })

        console.log(this.state + " mer state her");
        function insert(event) {
            event.preventDefault();
            console.log("added stuff"); 
        }
    },
    render() {
        return (
            <div>
                <form onSubmit={this.insertToCollection}>
                    <input type='text' placeholder="Select a restaurant" className="input-field" 
                    onChange={this.handleChange} id="post1"/>
                    <input type='text' placeholder="What type of food they have" className="input-field" 
                    onChange={this.handleChange} id="post2"/>
                    <button className="waves-effect waves-light btn btn-block" onChange={this.insert}> Submit </button>
                </form>
                <DisplayData posts={this.state.posts}/>
            </div>
        );
    }
});


var DisplayData = React.createClass({
    render(){
        var posts = this.props.posts || [];

        var renderPosts = posts.map(function(post, index) {
            return (
              <li key={index}>{post}</li>
            ); 
        });

        return (
          <div>
            <p> Your collection </p>
            <ul>
              {renderPosts}
            </ul>
          </div>
        );
    }
});

渲染数据插入反应组件中的集合

2 个答案: