小编典典

流星+ 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