Как реализовать переключение вкладок с использованием классов вместо функций?

Question

[75db77]

Как написать код без хуков и с классовыми компонентами, а не функциональными?

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

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

<div id="app"></div>

body {font-family: Arial;}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab button:hover {
  background-color: #ddd;
}


.tab button.active {
  background-color: #ccc;
}


.tabcontent {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Answer 1

[0xD34F]

class TabContent extends React.Component {
  render() {
    const { title, content } = this.props;

    return (
      <div className="tabcontent">
        <h3>{title}</h3>
        <p>{content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: null,
  }

  openTab = e => this.setState({
    active: +e.target.dataset.index,
  });

  render() {
    const { items } = this.props;
    const { active } = this.state;

    return (
      <div>
        <div className="tab">
          {items.map((n, i) => (
            <button
              className={`tablinks ${i === active ? 'active' : ''}`}
              onClick={this.openTab}
              data-index={i}
            >{n.title}</button>
          ))}
        </div>
        {items[active] && <TabContent {...items[active]} />}
      </div>
    );
  }
}

Answer 2

[Антон Спирин]

Посмотрите ответ на ваш прошлый вопрос. Там почти идентичный пример и пошаговая реализация в двух версиях.

Comments

[75db77]

Спасибо вы мне очень помогли ответом на предыдущий мой вопрос, и дали понимание почему я не понимаю предложенные пользователем 0xD34F коды, а их было несколько, а потому что я учил теорию иначе, без хуков и с классовыми компонентами, но при изучении любого алгоритма,или какого-то кода он лучше понимается когда несколько примеров увидишь. Для меня что б понять какую-то тему надо 3-4 примеры. Кому-то двух достаточно, кому-то может и одного,все индивидуально, эта тема как раз таки создана чтобы научиться самому писать React приложения а не просить перевести с языка програмирования которой я уже изучил и понимаю.
К сожелению по той дорожной карте по которой я учил Javascript, у меня нет времени изучать React, так как и так мое обучение слишком затянулось, а именно:
1) вызубрить и понять документацию на оф. сайте
2) начинать создавать маленькие компоненты, а потом большие
3) создать сайт на react
4) повторить 3 пункт несколько раз
Это конечно самый лучший вариант, но не в моей ситуации...
Поэтому сразу после пройденного видеокурса по react я решил перейти к пункту №3 пропустив первые два, хотя документацию официальную я прочитал но только раздел "ОСНОВНЫЕ ПОНЯТИЯ".

[Антон Спирин]

75db77, то, что вы пропустили изучение документации это вы зря. Какие цели вы перед собой ставите? Каких результатов хотите добиться в минимальные сроки?

[75db77]

Антон Спирин, хочу до конца лета изучить тот минимум чтобы взяли меня на работу junior front-end developer, с осени 2018 года изучал html, css = 2,5 месяца и js где-то пол года, а только последний месяц-два изучаю react. сейчас понимаю что за тот год, когда я изучаю программирование надо было по другому немного распределить время на изучение технологий, примерно так:
html, сss- 2-3 недели
javascript - 3 месяца
react-6-8 месяцев
Но что уже сделаешь, приходится исходить из тех условий что есть.

[Антон Спирин]

75db77, таким способом вы его вряд ли изучите. Вам надо начать писать проект решающий реальные задачи. Простейший пример тот же Weather App.
В решении обязательно использовать state management библиотеку вроде Redux или MobX. Использовать открытое API какого-нибудь погодного сервиса, вроде openweather. Сохранять пользовательские данные в localStorage. Использовать какое-нибудь решение для стилизации. И при этом грамотно использовать возможности React. С такими темпами что-то подобное еще очень не скоро напишите. Вам обязательно надо разобраться с документацией. Всю документацию можно изучить за день-два.

На интервью в любую компанию будут задавать вопросы по API React. Статичный сайтик написанный силами
пользователей Тостер вам там ничем не поможет, да и никому не будет интересен. Другое дело полноценное приложение, демонстрирующее как минимум знакомство с экосистемой и вашу способность разобраться с необходимыми инструментами и правильно их использовать.

Свидетели видеоуроков ни в одной нормальной компании не нужны. Люди предпочитающие по каждому поводу задавать вопросы на SO тоже.

Тут важно еще хорошо JavaScript понимать.

Короче, вам надо полностью менять подход.