React组件中如何对接收的props属性名进行重命名

完全不需要修改外部传参名或者内部状态名，用JavaScript原生的解构赋值别名语法就可以零成本解决，没有任何副作用，适配大体量代码库的改造需求。

函数组件实现 #

在接收props时直接通过解构语法将传入的firstProp重命名为你需要的别名即可，和内部状态完全不会产生命名冲突：

import { useState } from 'react';

// 入参位置直接解构重命名
const MyComponent = ({ firstProp: externalFirstProp, secondProp, ...restProps }) => {
  // 内部状态可以正常保留firstProp命名，不需要修改
  const [firstProp, setFirstProp] = useState('内部状态默认值');

  // 业务逻辑中：外部传入的值用externalFirstProp访问，内部状态值用firstProp访问
  return (
    <div>
      <p>外部传入值：{externalFirstProp}</p>
      <p>内部状态值：{firstProp}</p>
    </div>
  );
};

如果习惯在函数体内获取props，也可以在函数内部解构：

const MyComponent = (props) => {
  const { firstProp: externalFirstProp, secondProp } = props;
  const [firstProp, setFirstProp] = useState('内部状态默认值');
  // 后续逻辑一致
};

类组件实现 #

类组件中在访问this.props时做同样的解构重命名即可：

import React from 'react';

class MyComponent extends React.Component {
  state = {
    firstProp: '内部状态默认值'
  };

  render() {
    // 重命名props中同名属性
    const { firstProp: externalFirstProp, secondProp } = this.props;
    const { firstProp } = this.state;

    return (
      <div>
        <p>外部传入值：{externalFirstProp}</p>
        <p>内部状态值：{firstProp}</p>
      </div>
    );
  }
}

注意事项 #

• 该方案是纯语法层面的变量别名，不会修改原始的只读props对象，完全符合React的数据流规范，不会引发额外的渲染异常问题。
• 如果需要将剩余props透传给子组件，配合rest参数收集剩余属性即可，不会影响原有透传逻辑。
• 禁止直接修改props对象添加别名属性，比如写props.externalFirstProp = props.firstProp，这种直接修改只读props的操作属于React反模式，会导致不可预期的bug。
• TypeScript项目中该写法完全兼容，类型推导会自动映射到重命名后的变量，不需要额外修改类型定义。

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