Реакт-маршрутизатор конвертирует const в класс с подчиненными маршрутами

Question

Я просто копирую и вставляю этот пример (https://reacttraining.com/react-router/web/example/route-config) из официальной документации response-router, и это прекрасно работает, но я не люблю использовать const для этих компонентов, поэтому мне нравится использовать вместо него класс в качестве компонента Итак, мне интересно, как я могу преобразовать это const в компонент класса реакции?

const Tacos = ({ routes }) => (
  <div>
    <h2>Tacos</h2>
    <ul>
      <li>
        <Link to="/tacos/bus">Bus</Link>
      </li>
      <li>
        <Link to="/tacos/cart">Cart</Link>
      </li>
    </ul>

    {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
  </div>
);

Answer 1

Это так называемые функциональные компоненты без состояния. Они на самом деле предпочтительнее классов, если у вас нет каких-либо состояний или методов, которые необходимо присоединить к классу, поскольку они более легки и обеспечивают небольшое повышение производительности в React. Вот как бы вы написали это как класс:

import RouteWithSubRoutes from './utils/RouteWithSubRoutes';

class Tacos extends React.Component {
  constructor(props) {
    super(props);  
  }

  render() {
    return (
      <div>
        <h2>Tacos</h2>
        <ul>
          <li>
            <Link to="/tacos/bus">Bus</Link>
          </li>
          <li>
            <Link to="/tacos/cart">Cart</Link>
          </li>
        </ul>
    {this.props.routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
      </div>
    )
  }
}