2

react-komposer パッケージを使用して Meteor でアプリを構築しています。それは非常に単純です:検索フォームと結果のリストを含む最上位のコンポーネント ( App ) があります。リストは、komposer コンテナー ( AppContainer )によって提供される props を介してエントリを取得します。リストに表示される結果を絞り込むために検索を実装しようとするまでは、完全にうまく機能します。

これは私が始めたコードです ( AppContainer .jsx):

import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import React, { Component } from 'react';
import Entries from '../api/entries.js';
import App from '../ui/App.jsx';

function composer(props, onData) {
  if (Meteor.subscribe('entries').ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

export default composeWithTracker(composer)(App);

アプリは、エントリのリスト全体を単純にレンダリングします。私が達成したいのは、 AppEntries.find({}).fetch();コンポーネントからのデータ（テキスト入力などでキャプチャされたもの）でクエリパラメーターを渡すことです。つまり、特定のエントリを検索し、最終的に対応する結果を再レンダリングするために、 App (子) コンポーネントからAppContainerにパラメータをフィードするにはどうすればよいでしょうか?

さらに明確にするために、App.jsx のコードを次に示します。

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <form>
          <input type="text" placeholder="Search" />
        </form>
        <ul>
          {this.props.entries.map((entry) => (
            <li key={entry._id}>{entry.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

前もって感謝します！

4

2 に答える 2

2

nupacの回答を明確にするためにコメントを書くつもりでしたが、文字数が制限されすぎていました.

探しているサンプル コードは、nupac が提供する検索チュートリアル リンクにあります。対応する変更を加えた composer 関数は次のとおりです。

function composer(props, onData) {
  if (Meteor.subscribe('entries', Session.get("searchValues")).ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

解決策は、セッションパッケージです。パッケージファイルに追加する必要がある場合があり、インポートしなくても利用できるはずです。それ以外の場合import { Session } from 'meteor/session'; は、検索フォームを送信するときにセッションを設定する必要があるだけです。たとえば、次のようにします。

Session.set("searchValues", {
      key: value
});

サブスクリプションは、特定のセッション値が変更されるたびにデータを自動的に取得します。

最後に、サーバー側の publish メソッドで値にアクセスできるようになります。

Meteor.publish('entries', (query) => {
  if (query) {
    return Entries.find(query);
  } else {
    return Entries.find();
  }
});

お役に立てれば。そうでない場合は、お知らせください。

于 2016-07-13T04:27:06.257 に答える