面试题：React高阶组件中如何正确传递props

确保原组件props正确传递且避免冲突的方法

使用展开运算符传递props：在HOC返回的新组件中，通过展开运算符将接收到的所有props传递给原组件。这样可以确保原组件能接收到所有传入HOC的props，同时HOC自身添加的props也不会干扰到原组件的props匹配。例如：

import React from 'react';

// 高阶组件
const withLogging = (WrappedComponent) => {
    return (props) => {
        console.log('Props received:', props);
        return <WrappedComponent {...props} />;
    };
};

// 原组件
const MyComponent = ({ name }) => {
    return <div>Hello, {name}</div>;
};

// 使用高阶组件包装原组件
const LoggedComponent = withLogging(MyComponent);

// 使用包装后的组件
function App() {
    return <LoggedComponent name="John" />;
}

export default App;

在上述代码中，withLogging HOC通过{...props}将所有props传递给WrappedComponent（即MyComponent），MyComponent能正确接收到name属性。

选择性传递props：有时可能只需要传递特定的props给原组件，这时可以手动挑选并传递。例如：

import React from 'react';

const withExtraProp = (WrappedComponent) => {
    return (props) => {
        const { extraProp, ...restProps } = props;
        return <WrappedComponent {...restProps} />;
    };
};

const AnotherComponent = ({ value }) => {
    return <div>{value}</div>;
};

const EnhancedComponent = withExtraProp(AnotherComponent);

function App() {
    return <EnhancedComponent value="Some value" extraProp="Extra data" />;
}

export default App;

这里withExtraProp HOC通过解构赋值分离出extraProp，然后将剩余的restProps传递给AnotherComponent，避免了extraProp干扰原组件。

常见的props传递和合并方式

直接合并：如前面第一个例子，使用展开运算符直接将所有props传递给原组件，这是最常见的方式，适用于大多数情况，简单直接。
浅合并：在传递props时，可以在原props基础上添加新的props。例如：

import React from 'react';

const withNewProp = (WrappedComponent) => {
    return (props) => {
        const newProps = { newKey: 'new value' };
        return <WrappedComponent {...props} {...newProps} />;
    };
};

const ThirdComponent = ({ newKey, otherProp }) => {
    return <div>{`${newKey}: ${otherProp}`}</div>;
};

const NewEnhancedComponent = withNewProp(ThirdComponent);

function App() {
    return <NewEnhancedComponent otherProp="Original data" />;
}

export default App;

这里HOC添加了newKey属性，并与原组件的props进行了合并。如果原组件和HOC添加的props有相同的键，后面的（这里是HOC添加的）会覆盖前面的。

深度合并：当props是对象且需要深度合并时，可以使用lodash库的merge方法。例如：

import React from'react';
import merge from 'lodash/merge';

const withDeepMergeProp = (WrappedComponent) => {
    return (props) => {
        const newObjProp = { inner: { key: 'new inner value' } };
        const mergedProp = merge({}, props.objProp, newObjProp);
        return <WrappedComponent {...props} objProp={mergedProp} />;
    };
};

const FourthComponent = ({ objProp }) => {
    return <div>{`${objProp.inner.key}`}</div>;
};

const DeepEnhancedComponent = withDeepMergeProp(FourthComponent);

function App() {
    const initialObjProp = { inner: { key: 'original inner value' } };
    return <DeepEnhancedComponent objProp={initialObjProp} />;
}

export default App;

这里withDeepMergeProp HOC使用merge方法深度合并了objProp，保证了对象内部属性的正确合并，而不是简单的覆盖。

星途面试题库

面试题：React高阶组件中如何正确传递props

知识考点

面试题答案

确保原组件props正确传递且避免冲突的方法

常见的props传递和合并方式