面试题：React中高阶组件如何处理Props并传递给被包裹组件

Question

请描述在React中，高阶组件是怎样接收和处理Props，并将处理后的Props传递给被包裹组件的。举例说明如何通过高阶组件对Props进行一些简单的验证或修改后再传递。

Answer 1

高阶组件接收和处理Props并传递给被包裹组件的过程

1. 接收Props：高阶组件本质是一个函数，它接收一个组件（被包裹组件）作为参数，并返回一个新的组件。这个新组件会接收所有传递给它的Props。
2. 处理Props：在返回的新组件内部，可以对接收的Props进行各种操作，比如验证、修改、添加新的Props等。
3. 传递Props：处理完Props后，将处理后的Props传递给被包裹组件。

示例：通过高阶组件对Props进行简单验证和修改

import React from 'react';

// 被包裹组件
const MyComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

// 高阶组件
const withPropsValidation = (WrappedComponent) => {
  return (props) => {
    let newProps = { ...props };
    // 验证name是否存在，如果不存在设置为'Guest'
    if (!newProps.name) {
      newProps.name = 'Guest';
    }
    return <WrappedComponent {...newProps} />;
  };
};

// 使用高阶组件包裹MyComponent
const EnhancedComponent = withPropsValidation(MyComponent);

// 在应用中使用EnhancedComponent
const App = () => {
  return (
    <div>
      <EnhancedComponent />
      <EnhancedComponent name="John" />
    </div>
  );
};

export default App;

在上述代码中，withPropsValidation是一个高阶组件，它接收MyComponent作为参数并返回一个新组件。新组件在渲染MyComponent之前，验证name这个Prop是否存在，如果不存在则将其设置为Guest，然后将修改后的Props传递给MyComponent。