Question

我使用Meteor和React作为视图层。有没有人知道或者知道使用这种组合查询本地客户端集合并将该数据作为React组件中的道具传递的示例？

我说的是像客户端组件这样的东西：

const flashMessages = new Mongo.Collection(null)

...在它和一些方法，如添加，删除等。那么如何最好地在当前或另一个React组件中显示该数据。我发现有几个例子用Blaze做这样的事情，但没有用React。我不确定这种情况下数据是否/如何被反应，以及getMeteorData()之类的内容是否需要混合。

关于如何最好地处理这种组合的任何建议或示例都会很棒！

Answer 1

对于其他可能对此感兴趣的人，这就是我的工作。我有一个消息模块，但您可以将此原则应用于您想要或需要的任何其他类型的集合：

const Messages = {
  // Local (client-only) collection
  collection: new Mongo.Collection(null),

  addMessage(message, level) {
    // set default type to error
    level = (typeof level === 'undefined') ? 'error': level;
    // Store in the local collection
    this.collection.insert({message: message, level: level, isDialog: false});
  },

  addDialogMessage(message, level) {
    // set default type to error
    level = (typeof level === 'undefined') ? 'error': level;
    // Store in the local collection
    this.collection.insert({message: message, level: level, isDialog: true});
  },

  removeMessage(messageId) {
    this.collection.remove(messageId);
  },

  clearMessages() {
    let messages = this.collection.find({}).fetch()
    messages.map((message) =>
      this.collection.remove(message._id)
    )
  }
};

export default Messages

这可以容纳你＆＃34;数据库＆＃34;方法。然后在我的情况下，我有一个显示an instance此数据的组件：

import { Component, PropTypes } from 'react'
import ReactMixin  from 'react-mixin'
import Messages from 'common/client/components/flash/MessageTest'


@ReactMixin.decorate(ReactMeteorData)
export default class EpFlash extends Component {

  getMeteorData() {
    let messages
    if (this.props.isDialog) {
     messages = Messages.collection.find({isDialog: true}).fetch()
    }else{
     messages = Messages.collection.find({isDialog: false}).fetch()
    }
    return {
      messages
    }
  }

  remove = (id) => {
    Messages.removeMessage(id)
  }

  render() {
    let styles = {
      error: {color: '#fff', background: '#a94442',
        textAlign: 'center', marginBottom: '5px'},
      warning: {color: '#fff', background: '#f0ad4e',
        textAlign: 'center', marginBottom: '5px'},
      info: {color: '#fff', background: '#337ab7',
        textAlign: 'center', marginBottom: '5px'},
      success: {color: '#fff', background: '#5cb85c',
        textAlign: 'center', marginBottom: '5px'}
    }
    return (
      <div>
        {this.data.messages.map((message, index) =>
          <div key={index}>
            <span  className="cute-row"
              style={styles.error}>
              {message.message}
            <span onClick={this.remove.bind(this, message._id)}
              style={{float: 'right', cursor: 'pointer', paddingRight: '5px'}}>
              <i>&times;</i>
            </span>
            </span>
          </div>
        )}
      </div>
    );
  }
}

在这里，您可以应用动画，超时或其他任何内容，因为React您使用的每个地方都是它自己的组件实例。我将使示例中的类动态但尚未实现。我让他们进去，让你知道什么是可能的。

然后，只要您使用它，就可以将它与数据库模块中的方法结合使用，以获得您需要的任何内容。我在2个不同的标签或窗口中运行它，你会看到它们都是它自己的实例。您可能对此非常感兴趣，但请记住，在页面刷新或浏览器关闭时会删除该集合，因此如果您需要预先填充实例的任何内容，则需要使用componentWillMount()之类的内容。我还会清除ComponentWillUnmount()或某个地方的每个实例，以确保安全。

import { Component, PropTypes } from 'react'
import Messages from 'common/client/components/flash/MessageTest'
import EpFlash from 'common/client/components/flash/EpFlash'

export default class Wrapper extends Component {

  add = () => {
    Messages.addMessage('crap', 'error')
  }

  addDialog = () => {
    Messages.addDialogMessage('dialog crap', 'error')
  }

  clear = () => {
    Messages.clearMessages()
  }

  render() {
    return (
      <div>
        <h3>Messages</h3>
        <EpFlash isDialog={true}/>
        <button onClick={this.add}>Add</button>
        <button onClick={this.addDialog}>Add Dialog</button>
        <button onClick={this.clear}>Clear</button>
      </div>
    )
  }
}

这只是一个简单的原型，有改进的余地，但它有效并且希望能让任何对此类感兴趣的人成为起点。

P.S。 getMeteorData正在改变为Meteor 1.3中的createContainer。这个例子基于1.2，因为1.3是全新的。

使用React组件的Meteor本地客户端集合

1 个答案: