流星+ React中的条件渲染

小编典典

流星+ React中的条件渲染

reactjs

我正在尝试在Meter + React中获得一些条件渲染。我只希望组件从集合返回的项目数=== 0时显示。

我尝试了这个：

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

并将{this.renderInputForm（）}放入主render（）中，但是在隐藏之前会闪烁一秒钟……

我知道为什么会发生闪光灯，但要避免闪光……。

阅读 371

2020-07-22

共1个答案

小编典典

您必须等待数据完成同步。之所以会出现闪存，是因为最初的MiniMongo集合为空。（此外，您可能要避免Collection.find()在渲染函数中使用。）

假设您使用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组件中是否存在。

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

2020-07-22