Meteor Reactjs owl Carousel答案

【问题标题】：Meteor Reactjs owl CarouselMeteor Reactjs owl Carousel
【发布时间】：2018-09-05 04:33:13
【问题描述】：

这是我从 mini mongo db 渲染 av 的主要组件。我当前的问题是当我将 this.props.av 发送到它不加载的轮播中时。我确实注意到这些道具仅在某些组件重新渲染后才可见。在 displayAvCarousel 中如果我通过 avCarouselList 数组轮播将工作没有问题。但是我从静态数组更改为后端数组时，加载轮播存在问题。我不确定问题可能是什么。我在想数据没有在装载时加载组件。有什么建议。谢谢

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Carousel } from 'react-responsive-carousel';
import AV from './AV';

class FullAVList extends Component {
  constructor(props) {
  }
  displayAvList() {
    let avList = this.props.av;

    return avList.map((av) => {
     return <AV key={av._id} av={av} />;
    });
  }
  // filter sponsored events
  displayAvCarousel(){

    const avCarouselList = [
      {
        id: 1,
        img: "./images/av-img-header.jpg",
        s: false,
      },
      {
        id: 2,
        img: "./images/av-img-header.jpg",
        s: true,
      },
    ];


    let avFilters = this.props.av.filter((av) => av.s == true);

    return this.props.av.map((av) => {
      return (
        <div>
          <img src={av.img} />
        </div>
      );
    });
  }

  render() {
    return (
      <div>
        <Carousel showArrows={true} legend={false} showThumbs={false} infiniteLoop={true} swipeable={true}>
          {this.displayAvCarousel}
        </Carousel>
        {this.displayAvList()}
      </div>
    );
  }
}

export default createContainer(() => {
  Meteor.subscribe('autoevents');

  return {
    av: AV.find({ av: true }, { sort: { createdAt: -1 } }).fetch(),
  };
}, FullAVList);

【问题讨论】：

尝试两件事：{this.displayAvCarousel} -> {this.displayAvCarousel()}（添加括号）。并且 createContainer 已弃用，您应该使用 withTracker guide.meteor.com/react.html#using-withTracker
谢谢，我想可能是这样。

标签： reactjs meteor owl-carousel

【解决方案1】：

让你的 displayAvList 函数从 props 接收数组的参数。什么都没有显示的原因是当组件渲染时还没有任何道具到达。

 render(){
 const {av} = this.props;
   // av represents your array which you can pass to the 
    // function displayAvList
 return (
    Carousel showArrows={true} legend={false} 
     showThumbs={false} infiniteLoop={true} swipeable= 
    {true}>
      {this.displayAvCarousel}
       {this.displayAvList(av)
    </Carousel>

 })}

【讨论】：