Question

鉴于此订阅以及下面的React组件，如何以道具'searchTerms'的形式传递订阅数据？我能找到的大多数文档都提到了使用mixins，但据我所知，这是ES6中的反模式。谢谢！

constructor() {
  super();
  this.state = {
    subscription: {
      searchResult: Meteor.subscribe("search", searchValue)
    }
  }
}

render() {
  return (
    <div>
      <SearchWrapper 
        searchTerms={this.state.subscription.searchResult} 
      />
    </div>
  )
}

Answer 1

在Meteor中创建容器有两种选择。我个人最喜欢的是react-komposer。

以下是使用react-komposer的容器的外观。请注意，容器只是一个只传递数据的组件，而在Meteor的情况下，则提供反应性。

在npm install --save react-komposer之后，使用以下命令创建容器：

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { composeWithTracker } from 'react-komposer';

import Component from '../components/Component.jsx';
import { Collection } from '../../api/collection/collection.js';

// Creates a container composer with necessary data for component
const composer = ( props, onData ) => {
  const subscription = Meteor.subscribe('Collection.list');

  if (subscription.ready()) {
    const collection = Collection.find().fetch(); // must use fetch
    onData(null, {collection});
  }
};

// Creates the container component and links to Meteor Tracker
export default composeWithTracker(composer)(Component);

Answer 2

这样做的标准方法是使用react-meteor-data包。

meteor add react-meteor-data

然后按如下方式创建容器：

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import SearchWrapper from '../pages/SearchWrapper.jsx';
import { SearchResults } from '../../api/searchResults.js';

export default SearchResultContainer = createContainer(({ params }) => {
  const { searchValue } = params;
  const searchHandle = Meteor.subscribe('search', searchValue);
  const loading = !searchHandleHandle.ready();
  const results = SearchResults.find().fetch();
  const resultsExist = !loading && !!list;
  return {
    loading,
    results,
    resultsExist,
  };
}, SearchWrapper);

容器中返回的对象在包装组件中可用作道具 - SearchWrapper。

如何使用ES6将流星订阅数据传递到React Component Props

2 个答案: