Question

我正在尝试使用react-slideshow创建自动幻灯片。我很陌生，刚刚开始做出反应。我从here获得了此代码。

import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
  './img/p1.png',
  './img/p1.png',
  './img/p1.png'
];

const Slideshow = () => {
return (
    <Fade
      images={images}
      duration="5000"
      transitionDuration="1000"/>
   )
}

我没有得到的是如何使这个幻灯片实际渲染。我所做的是从同一文件中的一个组件内部调用此函数，即

class App extends Component {
  render() {
    return (
      <div className="App">
      {Slideshow();}
    </div>
    );
  }
}
export default App;

这不会呈现任何幻灯片或图片，我对此并不感到惊讶。该功能正在运行。我控制台记录了一些东西，它已登录控制台。页面的其余部分（我在这里没有显示其他div）被渲染，并且没有抛出错误。如何使这项工作？

Answer 1

此代码似乎没有错。

尝试在app组件中定义Slideshow（）函数。
拨打电话，例如“{this.Slideshow}”。
通过删除图像路径中的“./”进行检查。（尝试..）

同时检查图像的路径。有时他们会引用src文件夹之外的公共文件夹。也许是public / images / img.png

Answer 2

Slideshow是一个React组件，所以你需要使用JSX渲染它，而不是调用函数：

class App extends Component {
  render() {
    return (
      <div className="App">
        <Slideshow/>
      </div>
    );
  }
}
export default App;

无法使用反应

2 个答案: