如何直接或使用异步将Reactstrap轮播添加为子组件？

Question

我在应用程序中使用reactstrap，但是发现react出现了一些问题。

import CarouselExample from './Sliders/CarouselExample';

   render() {

    return (
        <React.Fragment>
            <div id="container">
                <CarouselExample />
            </div>

      </React.Fragment>
    );
  }
}

line报告了一个问题，由于我是react-redux的新手，所以我对此一无所知。我应该在我的代码中做什么？

我从此处获取了一个轮播示例代码：https://reactstrap.github.io/components/carousel/

使用16.9.0“构建的应用程序”，“ react-dom”：“ ^ 16.9.0”，“ react-redux”：“ ^ 7.1.0”，“ reactstrap”：“ ^ 8.0.1”，“ redux “：” ^ 4.0.4“和” redux-thunk“：” ^ 2.3.0“。

容器使用react组件，它只是重复图像滑块div。

输出：

我试图遵循指南并查找示例实现，但无法解决问题。

Answer 1

好像您缺少bootstrap 4依赖项和CSS。

在index.js文件中安装bootstrap 4.3依赖项和import "bootstrap/dist/css/bootstrap.min.css"。

有关更多详细信息，请参见沙盒： https://codesandbox.io/s/tender-newton-vty2r

还要提防在id中使用JSX标签。重用组件时可能会引起问题。我更喜欢使用refs。希望这会有所帮助。