Question

我使用Meteor和React构建了我的第一个网络平台。

目前我有一个包含用户可以提交的信息的数据库。我们有三个不同的章节，每章包含几个人们可以用来链接他们的信息的艺术家。

我的问题：

如何使用Meteor和React构建过滤系统，以便我可以根据用户的内容类型或内容链接的内容过滤用户上传的信息。

目前，我使用此文件从数据库中收集信息：

＆＃13;

import { composeWithTracker } from 'react-komposer';
import { Comments } from '../../api/comments/comments';
import CommentsListBeijing from '../components/beijing/comments-list-beijing';
import { Loading } from '../components/loading';
import { Meteor } from 'meteor/meteor';


const composer = (props, onData) => {
  const subscription = Meteor.subscribe('comments');
  if (subscription.ready()) {
    const comments =  Comments.find({approved: true, city: 'Beijing' }, {sort: {timestamp: 1}}).fetch();
    onData(null, { comments });
  }
};

export default composeWithTracker(composer, Loading)(CommentsListBeijing);

＆＃13;

目前，每个章节都有这样的文件。（我知道这不是理想的，但正如我所说，我的第一个项目）

因此，如果不是一直只加载所有信息，而是如何在我的主页上添加按钮或字段，以便我可以将不同的信息加载到作曲家中？

我在主页面上添加如下信息：

＆＃13;

import React from 'react';
import ReactPlayer from 'react-player';
import CommentsListBeijing from '../containers/comments-list-beijing';
import { SparkModalBeijing } from "../components/beijing/spark-modal-beijing";
import Fullscreen from 'react-fullscreen';

class Beijing extends React.Component {
	constructor(props){
		super(props);

		this.stopVideo = this.stopVideo.bind(this);
		this.playVideo = this.playVideo.bind(this);
		this.onSeek = this.onSeek.bind(this);

		this.state = {
    		playing: true,
    		timestamp: 0,
    	}
  	}

	duration = null
	onDuration = duration => {
		this.duration = duration
	}
	onProgress = progress => {
		if (this.duration && progress.played > 1 / this.duration) {
			const timestamp = parseInt(progress.played * this.duration);
			this.setState({ timestamp })
			console.log(timestamp);
		}
	}

	onSeek (e) {
	    const fraction =  parseFloat(e.target.value)
	    const newFraction = fraction / this.duration
	    this.refs.player.seekTo(newFraction)
  	}

	stopVideo(){
		this.setState({
			playing: false
		})
	}

	playVideo(){
		this.setState({
			playing: true
		})
	}

   	render() {
		return (
			<div>
				<Fullscreen>
					<ReactPlayer 
						url='http://www.youtube.com/watch?v=8HK0MBLLVO8?wmode=opaque' 
						ref='player'
						playing={this.state.playing}
						onProgress={this.onProgress}
			          	onDuration={this.onDuration} 
			          	controls={true}/>
			    </Fullscreen>
			    <div className="barhide show">
				<SparkModalBeijing className="add-spark" timestamp={this.state.timestamp} playing={this.state.playing} playVideo={this.playVideo} stopVideo={this.stopVideo} />
				<input type="range" min="0" max={this.duration} value={this.state.timestamp} onChange={this.onSeek}/>
				<CommentsListBeijing timestamp={this.state.timestamp} stopVideo={this.stopVideo} playVideo={this.playVideo}/>
				</div>
			</div>
		);
	}
}

export default Beijing;

＆＃13;

Answer 1

将过滤条件传递为props，如下所示：

<CommentsList city="Beijing" timestamp=... />

并在你的作曲家函数中使用它：

const composer = (props, onData) => {
  const subscription = Meteor.subscribe('comments', {city: props.city});
  if (subscription.ready()) {
    const comments = Comments.find({city: props.city}, ...).fetch();
    onData(null, {comments});
  }
};

如何使用Meteor和React构建过滤器功能

1 个答案: