react-router 将 const 转换为带有子路由的类

Question

我只是从 react-router 的官方文档中复制并粘贴了这个示例（https://reacttraining.com/react-router/web/example/route-config），这非常有效，但我不喜欢对这些组件使用 const，所以我喜欢使用类作为组件，所以，我想知道如何将这个 const 转换为类 react 组件？

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>
    )
  }
}