账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    为什么我React 组件的 PropTypes检测类型无效?
    • 师傅被妖怪抓走了2020-01-01 00:00
    27
    0

    import React from 'react';
    import PropTypes from 'prop-types';

    // <Pt name={1} />

    export default class Pt extends React.Component {
    static propTypes = {

    type: PropTypes.string

    };

    render() {

    return (
      <h1> { this.props.name } </h1>
    )

    };
    };

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ♪月夜下的思念♬ 普通会员 1楼

      prop-types 是一个 React 组件的官方类型检查器,用于确保组件传递给父组件的 props 在预期的类型范围内。如果你在使用 prop-types 时遇到类型无效的问题,可能有以下几个原因:

      1. 定义了 prop 的类型但未在 propType 的声明中包含:type={string} 代表 prop 的类型是字符串,但是你的 prop 是一个对象,例如:{id: string}。你需要在 propType 的声明中包含这个对象的类型。

      jsx type={id: string}

      1. 定义了 prop 的类型但未在 propType 的声明中进行赋值:type={string} 代表 prop 的类型是字符串,但是你并没有在 propType 的声明中使用这个类型。你应该在 propType 的声明中使用这个类型,例如:type={id: string} = {id: string}

      jsx type={id: string} = {id: string}

      1. 定义了 prop 的类型但未在 propType 的声明中进行赋值且没有遵循默认值的规则:如果你的 prop 的类型不是预期的,你需要在 propType 的声明中进行赋值,并遵循默认值的规则。例如,如果你的 prop 的类型是字符串,但是你没有定义默认值,你需要这样定义:type={id: string} = {id: string | undefined}

      jsx type={id: string} = {id: string | undefined}

      1. 在 propType 的声明中, prop 的类型和 prop 的值不匹配:你可能在 propType 的声明中使用了错误的 prop 的类型。例如,如果你的 prop 的类型是字符串,但是你给它传递了数字,你需要修改 propType 的声明,使其匹配 prop 的类型。

      jsx type={id: string} prop={id: number}

      如果你在使用 prop-types 时遇到类型无效的问题,建议你检查你的 prop 和 propType 的声明,确保它们匹配,并遵循 propType 的所有规则。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部