如何从子组件更改 react-komposer (meteor) 中的订阅查询参数?
Posted
技术标签:
【中文标题】如何从子组件更改 react-komposer (meteor) 中的订阅查询参数?【英文标题】:How can I change the subscriptions query parameters in react-komposer (meteor) from a child component? 【发布时间】:2016-09-11 14:31:04 【问题描述】:我正在使用 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);
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>
);
提前致谢!
【问题讨论】:
【参考方案1】:我打算为此写评论以澄清 nupac 的答案,但字符数量太有限了。
您要查找的示例代码位于 nupac 提供的搜索教程链接中。以下是作曲家函数及其相应的变化:
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();
);
希望这会有所帮助。如果不是这样,请告诉我。
【讨论】:
【参考方案2】:您可以采用 2 种方法。
-
订阅方式,
Meteor.call 方式,
订阅方式
它涉及您设置从 url 获取的属性。因此,您设置路由以向您的 Component 发送 query 属性。您的组件使用该属性作为参数发送到您的出版物,并且只订阅符合搜索条件的内容。然后将查询放入 fetch 语句并呈现结果。
Meteor.call 方式
忘记订阅并按照旧方式进行。将您的查询发送到端点,在本例中为 Meteor 方法,并呈现结果。我更喜欢这种方法有一个原因,$text
。 Minimongo 不支持 $text,因此您不能使用 $text 在客户端搜索内容。相反,您可以使用文本索引和流星方法设置服务器的 mongo 来处理搜索和呈现结果。
看看什么适合您的优先事项。 meteor.call 方式需要您做更多的工作以使“搜索结果”可通过 url 共享,但您会获得更丰富的搜索结果。订阅方式更容易实现。
这里是search tutorial for meteor 的链接,如果您有兴趣,请阅读$text
【讨论】:
感谢您的回答。这让我大致了解了如何进行,但我无法将这些方法转化为实际代码。您能否根据代码摘录提供一个示例? @WolfgangBecker 对此有何更新?我有同样的问题,基本上我只想过滤我的组件中的列表。有示例代码吗? @reggieboyYEAH 我刚刚提交了一个基于 nupac 提出的解决方案之一的替代答案。以上是关于如何从子组件更改 react-komposer (meteor) 中的订阅查询参数?的主要内容,如果未能解决你的问题,请参考以下文章