Meteor + React中的条件渲染 [英] Conditional Rendering in Meteor + React

问题描述

我正在尝试在Meter + React中获得一些条件渲染。我只想要一个组件出现，如果从集合返回的项目数量=== 0。

I'm trying to get some conditional rendering in Meter + React. I only want a component to show up if the number of items returned from a collection === 0.

我试过这个：

renderInputForm () {
if (Tokens.find().count()) return;
return (<TokenForm />);
}

并将{this.renderInputForm（）}放在主render（）中，然后它会在隐藏之前闪烁一瞬间......

and put {this.renderInputForm()} in the main render(), but then it flashes for a split second before hiding it…

我知道为什么闪光灯正在发生但是试图避免它......。

I know why the flash is happening but trying to avoid it ….

推荐答案

您必须等待数据完成同步。闪存就在那里，因为最初的MiniMongo系列是空的。 （另外，您可能希望在渲染函数中避免 Collection.find（）。）

You must wait for the data to finish with synchronization. The flash is there because initially MiniMongo collections are empty. (Also, you might want to avoid Collection.find() in your render function.)

假设您使用Meteor 1.3.x：

Assuming you use Meteor 1.3.x:

export const MyComponent = createContainer(() => {
  let subscription = Meteor.subscribe('something');
  if (!subscription.ready()) return {};
  return {
    tokens: Tokens.find().fetch()
  }
}, InternalComponent);

然后检查是否存在 props.tokens 在你的React组件中。

And then check for the existence of props.tokens in your React component.

class InternalComponent extends React.Component {
  render() {
    if (!this.props.tokens || this.props.tokens.length > 0) return;
    return <TokenForm />;
  }
}

在此处了解有关订阅的更多信息： http://docs.meteor.com/#/full/meteor_subscribe

Find out more about subscriptions here: http://docs.meteor.com/#/full/meteor_subscribe

这篇关于Meteor + React中的条件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！