React父组件向子组件传参异常：无法访问props且无智能提示

一、修复参数访问问题 #

你写的Modal是函数组件，函数组件里不存在this对象，父组件传递的参数全部包含在传入的props参数里，正确的访问方式是从props中读取：

// 写法1：直接通过props访问
export const Modal = (props) => { 
  const test = props.person.name; 
  // ...其他逻辑
}

// 写法2：解构赋值（更推荐，代码更简洁）
export const Modal = (props) => { 
  const { person, size } = props;
  const test = person.name;
  // ...其他逻辑
}

二、添加VSCode智能提示 #

要让VSCode识别props类型并给出智能提示，有两种常用方案：

方案1：使用PropTypes（纯JavaScript项目）

1. 先安装依赖包：

npm install prop-types --save

2. 在组件中定义props的类型约束：

import PropTypes from 'prop-types';

export const Modal = (props) => { 
  const { person, size } = props;
  return (
    // 你的组件渲染内容
  )
}

// 定义props的类型规则
Modal.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string.isRequired,
    imageId: PropTypes.string.isRequired
  }).isRequired,
  size: PropTypes.number.isRequired
};

方案2：使用TypeScript（推荐大型项目）

直接通过TypeScript接口定义props的类型，VSCode会自动识别并提供智能提示：

// 定义props的接口类型
interface ModalProps {
  person: {
    name: string;
    imageId: string;
  };
  size: number;
}

// 给props指定类型
export const Modal = (props: ModalProps) => { 
  const { person, size } = props;
  return (
    // 你的组件渲染内容
  )
}

内容的提问来源于stack exchange，提问作者Chris Gauthier Winnipeg