如何从子组件更改 react-komposer (meteor) 中的订阅查询参数？

Question

我正在使用 react-komposer 包构建一个带有 Meteor 的应用程序。它非常简单：有一个顶级组件 (App)，其中包含一个搜索表单和一个结果列表。该列表通过 props 获取条目，由 komposer 容器 (AppContainer) 提供。它工作得很好，直到我尝试执行搜索，以缩小列表中显示的结果。

这是我开始使用的代码 (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);

App 只是呈现整个条目列表。我想要实现的是将查询参数传递给 Entries.find({}).fetch(); 以及来自 App 组件的数据（例如通过文本输入捕获）。换句话说：如何从 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>
    );
  }
}

提前致谢！

Answer 1

您可以采用两种方法。

订阅方式，
Meteor.call方式，

订阅方式

它涉及您设置从 url 获取的属性。因此，您设置路由以向您发送 query 属性 Component.Your 组件使用该属性作为参数发送到您的出版物并且仅订阅符合搜索条件的东西。然后将查询放入获取语句并呈现结果。

Meteor.call 方式

忘记订阅并以旧方式订阅。将您的查询发送到端点，在本例中为 Meteor 方法，并呈现结果。我更喜欢这种方法有一个原因，$text。 Minimongo 不支持 $text 所以你不能使用 $text 在客户端搜索东西。相反，您可以使用文本索引和 meteor 方法设置服务器的 mongo 来处理搜索并呈现结果。

看看什么适合您的优先级。 meteor.call 方法需要您做更多的工作才能使 "Search result" 可通过 url 共享，但您会获得更丰富的搜索结果。订阅方式更容易实现。

这里有一个 link 到一个 search tutorial for meteor and read about $text 如果你有兴趣

Answer 2

我本来打算为此写一条评论来澄清 nupac 的回答，但字符数限制太多。

您要查找的示例代码在 nupac 提供的搜索教程 link 中。这是具有相应更改的作曲家功能：

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

解决方案是 session 包。您可能需要将它添加到您的包文件中，并且无需导入它就可以使用。否则尝试 import { Session } from 'meteor/session'; 您只需要在提交搜索表单时设置会话。例如：

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

订阅将在每次特定会话值更改时自动获取数据。

最后，您将能够在服务器端访问发布方法中的值：

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

希望这对您有所帮助。如果不是这样，请告诉我。

如何从子组件更改 react-komposer (meteor) 中的订阅查询参数？

How can I change the subscriptions query parameters in react-komposer (meteor) from a child component?

composition

datafeed

npm

meteor

meteor-react

订阅方式

Meteor.call 方式