Question

我在我的react js项目中使用react-owl-carousel。

最初，我将通过API调用加载5个项目，然后，单击下一步按钮以获取下一个数据，然后进行API调用。问题是数据正在正确更新，但轮播的滑动效果消失了。我也尝试添加animateIn选项，但没有成功。

我还使用值为5的slideBy选项一次滑动5张图像，并从API调用中获取下5张图像。

有人可以帮我吗？

Answer 1

对我来说很好。

您必须通过使用正确安装react-owl-carousel

npm install react-owl-carousel

然后在Web-pack中配置插件，您只能使用npm run弹出弹出项目。

将以下代码写在我标记的位置。

plugins: [
    // other plugins,
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
],

您可以找到以下代码以供参考。

import React, { Component } from 'react';
import logo from './logo.svg';
import OwlCarousel from 'react-owl-carousel';
import '../node_modules/owl.carousel/dist/assets/owl.carousel.css';
import '../node_modules/owl.carousel/dist/assets/owl.theme.default.css';

class App extends Component {

  state = {
    item : [1,2,3],
    divPush : []
  }

  showData = () => {
    let { divPush } = this.state
    this.state.item.map((data,index) => {
      divPush.push(<div
        style={{
          backgroundColor : "green",
          padding : 10
        }}
      >
        I am {index + 1} div
      </div>)
      this.setState({ divPush })
      console.log("I am printing")
      return(
        <div
          style={{
            backgroundColor : "green",
            padding : 10
          }}
        >
          I am {index + 1} div
        </div>
      )
    })
  }

  update = () => {
    let { divPush } = this.state
    let length = divPush.length
    divPush.push(<div
      style={{
        backgroundColor : "green",
        padding : 10
      }}
    >
      I am div {length}
    </div>)
    this.setState({ divPush })
  }

  render(){
    return (
      <div style={{
        width : "100%",
        height : "100%",
        display : "flex",
        flexDirection : "column"
      }}>

        <OwlCarousel
          className="owl-theme"
          loop
          margin={10}
          nav
        >

            {this.state.divPush.map((data) => {
              return(data)
            })}

        </OwlCarousel>
          <div
            style={{
              marginTop : 20
            }}
          >
          <button
            onClick={this.update}
        >
          Add new
        </button>
          </div>
      </div>

    );
  }
}

export default App;

Answer 2

'等待'动态数据

class Room extends Component {
    state = { 
        product: {},
     }

    async componentDidMount() {
        const response = await axios.get('https://product-backend/api/end-point')
        .then((response) => {
            const {data: product} = response.data;

            this.setState({product});
        })
        .catch( (error) => {
          if (error.response) {
            this.props.history.push("/not-found");
          }
        });
    }

    render() { 
        const {product} = this.state;

        return ( 
            <React.Fragment>
                {product.photos && 
                   <OwlCarousel className='owl-theme' items={1} loop margin={10} nav> 
                       {product.photos && product.photos.map(photo =>
                           <div key={photo.id}>
                               <img className="img-responsive" src={product.photo_path + photo.photo} />
                           </div>
                        )}
                   </OwlCarousel>
                }
           </React.Fragment>
       )
}

等待在{product.photos && ...行

将数据动态添加到轮播后，滑动效果在react-owl-carousel中不起作用

2 个答案: