Как сделать Перенес это того код на React?

Question

Здравтствуйте! Пытаюсь перенести простой код с JS на Реакт, но не знаю как это сделать. Хочу сделать как в реакт - роутер, но таких примеров нету.

Вот код, код простой всего 9 строчек, на jsjsfiddle.net/c6pu17e3/

как на реакте сделать я не знаю, вот сделал только загатовку jsfiddle.net/c61uhrk8/

Как сюда вставить код я не знаю, вставляю как написано, всеранво все красным

Answer 1

Очень странный вопрос конечно, но что бы размяться я накидал то что работает так как в примере:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sectionName: 'Home' 
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    document.querySelector('.menu-active').classList.remove('menu-active');
    this.setState({sectionName: event.target.text});
    event.target.classList.add('menu-active');
  }

  render() {
    return (
      <>
        <div className="menu">
          <div className="menu-center">
            <ul>
              <li><a className="menu-active" onClick={(event) => this.handleClick(event)} href="#home">Home</a>

              </li>
              <li><a onClick={(event) => this.handleClick(event)} href="#portfolio">Portfolio</a>

              </li>
              <li><a onClick={(event) => this.handleClick(event)} href="#about">About</a>

              </li>
              <li><a onClick={(event) => this.handleClick(event)} href="#contact">Contact</a>

              </li>
            </ul>
          </div>
        </div>
        <section className={`section ${this.state.sectionName}`}></section>
      </>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

Не сама лучшая реализация, но какой вопрос, такой и ответ.

БЛОГ НА HUSL

Как сделать Перенес это того код на React?

Ответы (1 шт):