面试题：React中高阶组件的基本实现

Question

请用代码示例说明如何创建一个简单的React高阶组件，该高阶组件用于为传入的组件添加额外的属性。

Answer 1

import React from 'react';

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

// 被包装的组件
const MyComponent = ({ text, extraText }) => {
    return (
        <div>
            <p>{text}</p>
            <p>{extraText}</p>
        </div>
    );
};

// 使用高阶组件包装MyComponent
const EnhancedComponent = withExtraProps({ extraText: '这是额外的文本' })(MyComponent);

const App = () => {
    return (
        <div>
            <EnhancedComponent text="这是原始文本" />
        </div>
    );
};

export default App;