如何通过工具函数获取React子组件中的所有Props？

核心思路：同时保留完整props对象与解构变量 #

在函数组件中，你可以同时接收完整的props对象并解构需要的变量，既满足解构的需求，又能直接获取所有props，这是最简洁易维护的方案，无需额外工具函数。

修改后的子组件代码：

import { useEffect, useRef } from "react";
const House = (props) => {
  // 解构需要的props变量
  const { count, text } = props;
  const ref = useRef(count);

  useEffect(() => {
    // 直接使用props即可获取所有属性
    console.log("所有props:", props);
    console.log(ref.current);
    ref.current = count;
  });

  return <div className="App">{count}</div>;
};

export default House;

若必须在参数中直接解构（可选工具函数） #

如果场景要求必须在组件参数里直接解构，可编写一个可复用的工具函数，将解构后的变量与剩余props合并为完整对象：

// 可复用工具函数：合并解构变量与剩余props
const assembleProps = (destructuredVars, restProps) => {
  return { ...destructuredVars, ...restProps };
};

子组件中使用示例：

import { useEffect, useRef } from "react";

const assembleProps = (destructuredVars, restProps) => {
  return { ...destructuredVars, ...restProps };
};

const House = ({ count, text, ...rest }) => {
  const ref = useRef(count);
  // 组装得到完整props对象
  const allProps = assembleProps({ count, text }, rest);

  useEffect(() => {
    console.log("所有props:", allProps);
    console.log(ref.current);
    ref.current = count;
  });

  return <div className="App">{count}</div>;
};

export default House;

关键注意点 #

• 函数组件中不存在this，this.props完全无效：严格模式下this为undefined，非严格模式指向window，这和类组件的逻辑完全不同。
• 优先选择第一种方案（同时接收完整props并解构），无需额外代码，且后续新增props时无需修改组装逻辑。

内容的提问来源于stack exchange，提问作者kazon