使用 JSX 内容反应轮播类型功能答案

【问题标题】：React Carousel type functionality with JSX Content使用 JSX 内容反应轮播类型功能
【发布时间】：2020-05-07 06:57:59
【问题描述】：

我希望将页面/组件添加到以下控件。当前，当您向前和向后单击时，您会在导航（igation）控件之间显示计数。我想要实现的是创建一个在组件/视图之间轻弹的导航。我使用反应引导。我在路由方面遇到问题，因为它也位于选项卡式视图中，因此希望理想地保持相同的路由，而不必担心为每个视图更改此设置，请参见屏幕截图。

以下代码创建导航。我需要有关在向前和向后单击时添加视图的最佳方法的建议，类似于轮播，但使用视图而不是图像。谢谢。

import React from "react"
import styled, { css } from 'styled-components'
import './style.css'

const Button = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0.5em 1em;
      padding: 0.25em 1em;

      ${props => props.primary && css`
        background: palevioletred;
        color: white;
      `}
    `;

    const Container = styled.div`
      text-align: center;
    `
    class App extends React.Component {
        constructor() {
            super()
            this.state = {
                count: 0
            }
            this.handleForwardClick = this.handleForwardClick.bind(this);
            this.handleBackwardClick = this.handleBackwardClick.bind(this)
        }

        handleForwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count + 1
                }
            })
        }

        handleBackwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count - 1
                }
            })
        }

        render() {
            return (
                <Container className="flex-buttons">               
                    <Button onClick={this.handleForwardClick}>Forward</Button>
                    <h1>{this.state.count}</h1>
                    <Button primary onClick={this.handleBackwardClick}>Backward</Button>
                </Container>
            )
        }
    }
export default App

【问题讨论】：

也许你可以尝试一些现有的 ReactJS 轮播，看看它们中是否有任何一个接受组件作为可滑动元素？
您要更改的这些“视图”由什么组成？
视图当前由基于类的组件组成。我们确实使用了 react-redux，但可以转换为基于对象的组件。例如。导出默认 { 组件：connect(mapStateToProps)(SiteDashboard), loadData }
@GBWDev 视图实际上是一个数据表，它保持不变，但箭头会根据和 id（网络地址）更改内容

标签： reactjs carousel jsx nav react-bootstrap

【解决方案1】：

我建议使用slick-slider，因为此轮播允许您使用 html/jsx/component 内容而不是传统的图像节点。

示例取自代码框

import React from "react";
import ReactDOM from "react-dom";
import Slider from "react-slick";
import "./index.css";
import Image from "./image";

class ReactSlickDemo extends React.Component {
  render() {
    var settings = {
      dots: true
    };
    return (
      <div className="container">
        <Slider {...settings}>

          <Image /> // use your components here

          <Image /> // use your components here

          <Image /> // use your components here

        </Slider>
      </div>
    );
  }
}

ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));

演示： https://codesandbox.io/s/react-slick-playground-2ygjd?fontsize=14&hidenavigation=1&theme=dark

https://github.com/akiran/react-slick

【讨论】：

感谢您的建议，但我认为这仅适用于静态内容。它实际上是一个保持不变的数据表，它只是基于 id 更改的数据。数据来自api。
所以在点击按钮时，触发一个方法，在你的数据表组件中发送一个新的数据请求（使用新 ID）并重新渲染它？

【解决方案2】：

如果您正在寻找处理它的组件：这样的东西通常称为水平轮式选择器。我发现https://www.npmjs.com/package/react-native-horizontal-picker 在 React Native 中，而不是在 ReactJS 中。尽管如此，它似乎很容易，所以也许它可以帮助您自己实现它。这似乎也是 React Native 相关问题的建议：Input number in Angular Material Design?

我不知道像 Ant Design 这样的大型库有任何开箱即用的解决方案。他们只提供例如antd:input-number.

更多参考资料