Question

我正在使用Meteor与React。我有一个组件，它包含在react-composer中以订阅我的数据。我将服务器发布的限制设置为10，并在每次用户滚动到另一个按钮10时增强此限制。

问题是，不是只向视图添加10个新元素，而是整个组件似乎都在刷新。如何重新启动仅重新加载其他数据，而无需进行总计＆＃34;页面＆＃34;刷新？

原则上我使用javascript来检测用户何时到达页面底部，然后在parent组件中触发一个函数来更改我的LocationList的限制状态，然后触发服务器的发布以加载更多位置

服务器/ Publication.js

Meteor.publish("Locations", function(settings) {
  check(settings, Object);
  ReactiveAggregate(this, Locations, [
    { $limit: settings.limit },
    { $project: {
      name: '$name',
    }},
  ]);
});

的客户机/ LocationList.jsx

class LocationList extends React.Component {
  constructor(props) {
    super(props);

    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll() {
    const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
    const windowBottom = windowHeight + window.pageYOffset;
    if (windowBottom >= docHeight - 100) {
      // bottom reached
      this.props.onLoadMore();
    } else {
      // not bottom
    }
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  render() {
     ... something
  }
}

function composer(props, onData) {
  const settings = {
    limit: props.limit,
  };

  const locationSubscription = Meteor.subscribe('Locations', settings);

  if(locationSubscription.ready()) {
    locations = Locations.find({}, {limit: props.limit}).fetch();

    const data = {
      ready: true,
      locations: locations,
    }
    onData(null, data);
  } else {
    onData(null, {ready: false});
  }
}

const options = {
  loadingHandler: () => (<p>Loading... </p>)
};

export default composeWithTracker(composer, options)(LocationList);

的客户机/ LocationListLoader.jsx

export default class LocationListLoader extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      limit: 9
    };

    this.loadMore = this.loadMore.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.category != nextProps.category) {
      this.setState({ limit: 9 });
    }
  }

  loadMore() {
    const newLimit = this.state.limit + 6;
    this.setState({ limit: newLimit });

  }

  render() {
    return (
      <LocationList onLoadMore={this.loadMore} limit={this.state.limit} />
    )
  }
}

Meteor React无限滚动：停止组件刷新

0 个答案: