V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zevenfang
V2EX  ›  前端开发

React、Meteor 用户的福音,使用 Meteor 构建先进的 Web 项目

  •  1
     
  •   zevenfang ·
    ZevenFang · 2017-03-03 12:28:24 +08:00 · 2136 次点击
    这是一个创建于 2809 天前的主题,其中的信息可能已经有所发展或是发生改变。

    react-meteor

    Meteor Reactivity for your React application :).

    What is it for ?

    The purpose of this library is :

    • to set up and maintain a ddp connection with a ddp server, freeing the developer from having to do it on their own.
    • be fully compatible with react and help react developers.
    • to match with Meteor documentation used with React.

    Install

    npm i --save react-web-meteor
    

    Example usage

    
    import React, { Component } from 'react';
    import Meteor, { createContainer } from 'react-web-meteor';
    
    Meteor.connect('ws://192.168.X.X:3000/websocket');//do this only once
    
    class Todo extends Component {
      renderRow(todo) {
        return (
          <span>{todo.title}</span>
        );
      }
      render() {
        const { settings, todosReady, todos } = this.props;
        return(
          <div>
            <div>{settings.title}</div>
            {!todosReady && <span>Not ready</span>}
            <div>{todos.map(v=>this.renderRow(v))}</div>
          </div>
        )
      }
    }
    
    export default createContainer(params=>{
      const handle = Meteor.subscribe('todos');
      Meteor.subscribe('settings');
      return {
        todosReady: handle.ready(),
        settings: Meteor.collection('settings').findOne()
      };
    }, Todo)
    

    Connect your components

    Since Meteor 1.3, createContainer is the recommended way to populate your React Components.

    createContainer

    Very similar to getMeteorData but your separate container components from presentational components.

    Example

    import Meteor, { createContainer } from 'react-web-meteor';
    
    
    class Orders extends Component {
      render() {
        const { pendingOrders } = this.props;
    
        //...
        );
      }
    }
    
    export default createContainer(params=>{
      return {
        pendingOrders: Meteor.collection('orders').find({status: "pending"}),
      };
    }, Orders)
    

    Reactive variables

    These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.

    Additionals collection methods

    These methods (except update) work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.

    API

    Meteor Collections

    Meteor.subscribe

    Meteor.subscribe() returns an handle. If the component which called subscribe is unmounted, the subscription is automatically canceled.

    Meteor.collection(collectionName, options)

    You need pass the cursoredFind option when you get your collection if you want to use cursor-like method:

    Meteor.collection("collectionName", { cursoredFind: true })
    

    Or you can simply use find() to get an array of documents. The option default to false for backward compatibility. Cursor methods are available to share code more easily between a react app and a standard Meteor app.

    Meteor DDP connection

    Meteor.connect(endpoint, options)

    Connect to a DDP server. You only have to do this once in your app.

    Arguments

    • url string required
    • options object Available options are :
      • autoConnect boolean [true] whether to establish the connection to the server upon instantiation. When false, one can manually establish the connection with the Meteor.ddp.connect method.
      • autoReconnect boolean [true] whether to try to reconnect to the server when the socket connection closes, unless the closing was initiated by a call to the disconnect method.
      • reconnectInterval number [10000] the interval in ms between reconnection attempts.

    Meteor.disconnect()

    Disconnect from the DDP server.

    Meteor methods

    Availables packages

    Convenience packages

    Example `import { composeWithTracker } from 'react-web-meteor';``

    • EJSON
    • Tracker
    • composeWithTracker: If you want to use react-komposer, you can use react-web-meteor compatible composeWithTracker
    • Accounts (see below)

    ReactiveDict

    See documentation.

    Meteor.Accounts

    `import { Accounts } from 'react-web-meteor';``

    Meteor.ddp

    Once connected to the ddp server, you can access every method available in ddp.js.

    • Meteor.ddp.on('connected')
    • Meteor.ddp.on('added')
    • Meteor.ddp.on('changed')
    • ...

    Author

    Want to help ?

    Pull Requests and issues reported are welcome! :)

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2744 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:02 · PVG 16:02 · LAX 00:02 · JFK 03:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.