0

Как бы выглядел предложенный код но без хуков(hooks) и с классовыми компонентами а не функциональными? Я просто изучал React по урокам на ютуб , и там все уроки были построены на классах и обычных this.setState, без хуков, и сейчас путаюсь, потому-что думаю так как учили, а тут уже что-то новое и каша какая-то получается у меня. В перспективе конечно хочу и хуки виучить, и компонеты на основе функций, но пока не хочу смешивать что б лучше разобраться.

Сам код реализует слайдер:

React:

function Slider({ items }) {
  const [ active, setActive ] = React.useState(0);
  const { length, [active]: slide } = items;

  const next = e => setActive((active + +e.target.dataset.step + length) % length);
  const goTo = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="slideshow-container">
        <div className="mySlides fade">
          <div className="numbertext">{active + 1} / {length}</div>
          <img src={slide.img} />
          <div className="text">{slide.title}</div>
        </div>
        <a className="prev" onClick={next} data-step={-1}>&#10094;</a>
        <a className="next" onClick={next} data-step={+1}>&#10095;</a>
      </div>
      <div className="dots">
        {items.map((n, i) => (
          <span
            key={n.id}
            className={`dot ${i === active ? 'active' : ''}`}
            onClick={goTo}
            data-index={i}
          ></span>
        ))}
      </div>
    </div>
  );
}

const items = [
  { title: 'One', img: 'https://upload.wikimedia.org/wikipedia/commons/1/1f/Purity_of_nature.jpg' },
  { title: 'Two', img: 'https://mairie-balma.fr/wp-content/uploads/2016/06/Lhers.jpg' },
  { title: 'Three', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt-b1iBqHQ_emkm1wFmkM7KQskzIqg7YQPZWW85Sa7k2nNLwgjMw' },
].map((n, i) => ({ ...n, id: i + 1 }));

ReactDOM.render(<Slider items={items} />, document.getElementById('app'));

полный код вместе с файлами index.html и index.css по ссылке:

https://codepen.io/anon/pen/dBmvje

1 ответ 1

0
Class Slider extends React.Component {

  state = { active: 0 }

  render() {
    const { active } = this.getState();
    const setActive = a => this.setState({ active: a });
    const { length, [active]: slide } = this.props.items;

    const next = e => setActive((active + +e.target.dataset.step + length) % length);
    const goTo = e => setActive(+e.target.dataset.index);

    return (
      <div>
        <div className="slideshow-container">
          <div className="mySlides fade">
            <div className="numbertext">{active + 1} / {length}</div>
            <img src={slide.img} />
            <div className="text">{slide.title}</div>
          </div>
          <a className="prev" onClick={next} data-step={-1}>&#10094;</a>
          <a className="next" onClick={next} data-step={+1}>&#10095;</a>
        </div>
        <div className="dots">
          {this.props.items.map((n, i) => (
            <span
              key={n.id}
              className={`dot ${i === active ? 'active' : ''}`}
              onClick={goTo}
              data-index={i}
            ></span>
          ))}
        </div>
      </div>
    );
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.