Question

我只是从react-router的官方文档中复制并粘贴这个示例（https://reacttraining.com/react-router/web/example/route-config），这很有效，但我不喜欢使用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>
    )
  }
}

react-router将const转换为具有子路由

1 个答案: