React / Redux Карусель

Question

Итак, я создаю свой собственный сайт для своего резюме и столкнулся с проблемой, которую я не совсем уверен, как решить.Я использую React и Redux, возникает проблема, которая заключается в том, что я хочу, чтобы маленькие маленькие проекты отображались в формате карусельного типа с использованием должного интегрированного должного отклика. В настоящее время моя файловая структура выглядит следующим образом: src/ actions/ index.js components/ App.js NavBar.js Projects.js projects/ Project1/ Project2/ containers/ Main.js reducers/ index.js projects.js

Я точно не знаю, как добиться того, чего хочу, я искал хорошее решение, но пока ничего не нашел.Я все еще относительно новый, чтобы реагировать.Чего я не хочу, так это отображать один проект, прокручивать вниз, отображать следующий, прокручивать еще немного ... Я попробовал следующее:

let components = [{TicTacToe}, {}];
let index = 0;

export default class Projects extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      component: components[0]
    };
  }
  renderProject(i)
  {
    this.setState({component: components[i]});
  }

  backRotate()
  {
    index--;
    if(index < 0)
    {
      index = components.length - 1;
    }
    this.renderProject(index);
  }

  forwardRotate()
  {
    index++;
    if(index >= components.length)
    {
      index = 0;
    }
    this.renderProject(index);
  }

  render() {
    return(
    <div>
      <button onClick='backRotate'>Back</button>
      <div class='carousel-container'>
        <this.state.component />
      </div>
      <button onClick='forwardRotate'>Next</button>
    </div>
  ) }
}

Первоначально я думал, что это будет работать, но это ломается.В настоящее время я запускаю App.js в папке моих компонентов, добавляю компонент NavBar, а затем добавляю контейнер Main.js.Причиной этого контейнера стал тот факт, что мне нужна кнопка «назад» и «вперед» для поворота каждого проекта, как карусель изображений.Я рассмотрел добавление всех компонентов, а затем просто скрытие и раскрытие, но это кажется ненужной тратой ресурсов и что должен быть лучший способ сделать это.

Есть ли способ заменить компонент нанажатие кнопки?Полностью удалить оригинальный компонент и добавить новый компонент в?Если да, то как мне это сделать, используя приставку?В настоящее время мои проекты редуктор просто заполнитель.

Answer 1

Прежде всего, он ломается, потому что массив components содержит объекты, и React не может их иметь.

Допустимым элементом React является либо узел (HTMLElement, React Component, текст или число)или массив узлов.

Если вы просто хотите сохранить компоненты React в коллекции и выбрать, какие из них отображаются, сначала необходимо удалить фигурные скобки в массиве components, например:

let components = [TicTacToe, AnotherComponent];

И вам также нужно будет исправить обработчики backRotate и forwardRotate.Они не могут быть строковыми, как в html (обратите внимание на фигурные скобки вместо кавычек):

<button onClick={this.backRotate}>Back</button>
<button onClick={this.forwardRotate}>Next</button>

... и должны быть привязаны к экземпляру вашего компонента.Чтобы связать их, используйте метод Function.prototype.bind .Это должно быть сделано в конструкторе:

constructor(props) {
    super(props);
    this.backRotate = this.backRotate.bind(this);
    this.forwardRotate= this.forwardRotate.bind(this);
}

Без привязки this не будет ссылкой на экземпляр вашего компонента, и вызов этого в обработчиках определенно завершится неудачей.

TicTacToeи AnotherComponent должны быть классами, расширяющими React.Component или React.PureComponent, или должны быть чисто функциональными компонентами реквизита.

Кроме того, он более понятен и может быть лучше поддержан для объявления заглавной переменной, содержащей компонент:

render() {
    const Comp = this.state.component;
    return (
        <div>
            <button onClick={this.backRotate}>Back</button>
            <div class='carousel-container'>
                <Comp />
             </div>
             <button onClick={this.forwardRotate}>Next</button>
        </div>
     );
}

Наконец, вы должны установить index состояние вашего компонента (оно изменяется с помощью элементов управления компонента) и components опору (оно не изменяется внутри компонента).

Вместо установки текущего компонента в состояние вы установите индекс текущего компонента:

import React from 'react':
import PropTypes from 'prop-types';
import { TicTacToe, AnotherComponent } from 'path/to/named/imports/TicTacToeAndAnotherComponent';

export default class Projects extends React.Component {
    static propTypes = {
        components: PropTypes.any,
    }
    static defaultProps = {
        components: [TicTacToe, AnotherComponent],
    }
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
        };
        this.backRotate = this.backRotate.bind(this);
        this.forwardRotate= this.forwardRotate.bind(this);
    }
    backRotate() {
        const { components } = this.props;
        const { index } = this.state;
        if(index - 1 < 0) {
            this.setState(() => ({ index: components.length - 1 }));
        } else {
            this.setState(() => ({ index: index - 1 }));
        }
    }

    forwardRotate() {
        const { components } = this.props;
        const { index } = this.state;
        if(index >= components.length) {
            this.setState(() => ({ index: 0 }));
        } else {
            this.setState(() => ({ index: index + 1 }));
        }
    }
    render() {
        const Comp = this.props.components[this.state.index];
        return (
            <div>
                <button onClick={this.backRotate}>Back</button>
                <div class='carousel-container'>
                    <Comp />
                 </div>
                 <button onClick={this.forwardRotate}>Next</button>
             </div>
         );
    }
}

В любом случае Redux вам не поможет.

Цель Redux -главным образом для предоставления единого источника данных (единственного источника правды), обеспечения действий и редукторов для изменения этих данных и уведомления компонентов, зарегистрированных для прослушивания обновлений хранилища.Независимо от того, подключаете ли вы свою карусель к магазину, или нет, это не имеет отношения к решению вашей проблемы.