面试题：React高阶组件中如何传递额外的props

Question

请阐述在React高阶组件中，向被包裹组件传递额外props的方法，并给出简单示例代码。

Answer 1

在React高阶组件中，向被包裹组件传递额外props主要有以下两种常见方法：

1. 直接传递

在高阶组件内部返回一个新的组件时，将额外的props直接添加到被包裹组件上。

示例代码如下：

import React from 'react';

// 高阶组件
const withExtraProps = (WrappedComponent) => {
    return (props) => {
        const extraProps = {
            newProp: '这是额外的prop'
        };
        return <WrappedComponent {...props} {...extraProps} />;
    };
};

// 被包裹组件
const MyComponent = (props) => {
    return (
        <div>
            <p>{props.newProp}</p>
        </div>
    );
};

// 使用高阶组件
const EnhancedComponent = withExtraProps(MyComponent);

const App = () => {
    return (
        <div>
            <EnhancedComponent />
        </div>
    );
};

export default App;

2. 通过配置参数传递

高阶组件接受一个配置对象作为参数，在返回的新组件中根据配置对象传递额外props。

示例代码如下：

import React from 'react';

// 高阶组件
const withExtraProps = (config) => {
    return (WrappedComponent) => {
        return (props) => {
            const extraProps = {
               ...config
            };
            return <WrappedComponent {...props} {...extraProps} />;
        };
    };
};

// 被包裹组件
const MyComponent = (props) => {
    return (
        <div>
            <p>{props.newProp}</p>
        </div>
    );
};

// 使用高阶组件并传入配置
const EnhancedComponent = withExtraProps({ newProp: '通过配置传入的额外prop' })(MyComponent);

const App = () => {
    return (
        <div>
            <EnhancedComponent />
        </div>
    );
};

export default App;