11、React 组件扩展与路由处理全解析

React 组件扩展与路由处理全解析

1. 扩展组件的方法

在 React 开发中，扩展现有组件有多种方式，主要包括继承和高阶组件。

• 继承 ：使用 ES2015 类语法实现，对于实现通用方法或 JSX 标记非常有用。例如：

class ParentComponent extends React.Component {
  commonMethod() {
    console.log('This is a common method');
  }
}

class ChildComponent extends ParentComponent {
  render() {
    this.commonMethod();
    return <div>Child Component</div>;
  }
}

• 高阶组件 ：通过一个函数将一个组件包装在另一个组件中，为其提供新的功能。这是新的 React 应用发展的方向，逐渐取代了继承和混入的方式。示例代码如下：

const withNewFeature = (WrappedComponent) => {
  return class extends React.Component {
    newFeature() {
      console.log('This is a