Reactjs 我能'；我不明白为什么我的propTypes检查是'；这门课上没有课

我正试图在React中使用ES6类语法，但遇到了一个我无法理解的问题

对于下面的类，由于某种原因，没有运行propTypes检查，但我不知道为什么

import { Component } from "react"
import PropTypes from "prop-types"


class Summary extends Component {

    constructor() {
        super()
        this.displayName = "Summary"
    }


    render() {

        const {ingredients, steps, title} = this.props
        return(
            <div className="Summary">
                <h1>{title}</h1>
                <p>
                    <span>{ingredients} Ingredients</span> | <span> {steps} Steps</span>
                </p>
            </div>
        )
   }

}

Summary.defaultProps =   {
                ingredients: 0,
                steps: 0,
                title: "[untitled recipie]"

        } 

Summary.propTypes = {
            ingredients: PropTypes.number.isRequired,
            steps: PropTypes.number.isRequired,
            title: function (props, propName) {
                let title = props[propName];
                let valid = null;


                if (typeof title !== "string") return new Error("A title must be a string");
                if (title.length > 20) return new Error("Title's length is over 20 characters");

                return valid;

            }
}

export default Summary

从“react”导入{Component}
从“道具类型”导入道具类型
类摘要扩展了组件{
构造函数（）{
超级（）
this.displayName=“Summary”
}
render（）{
const{components，steps，title}=this.props
返回(
{title}

{配料}配料{步骤}步骤

)
}
}
Summary.defaultProps={
成分：0，
步骤：0，
标题：“[无标题收件人]”
} 
Summary.propTypes={
成分：PropTypes.number.isRequired，
步骤：需要PropTypes.number.isRequired，
标题：功能（道具、道具名称）{
让标题=道具[道具名称]；
设valid=null；
if（typeof title！=“string”）返回新错误（“标题必须是字符串”）；
如果（title.length>20）返回新错误（“title的长度超过20个字符”）；
返回有效；
}
}
导出默认摘要

如果我尝试使用以下内容创建元素：

<Summary title={5} steps="some string" />

我没有错误。它只是将标题呈现为“5”，步骤呈现为“某个字符串”。它应该抛出，因为步骤的propType需要一个数字，而标题的propType需要一个字符串

我尝试过的事情

• 我已经尝试在类声明中将propTypes设置为静态属性。那也没用
• 我尝试将propTypes设置为实例的属性，而不是类的属性。那肯定不行
• 我尝试设置道具类型，但没有默认道具。还是没有骰子
• 我曾尝试在谷歌上搜索“ES6类语法propTypes”的变体，但没有找到任何可以说明我做错了什么的东西

---

您确定应用程序未在生产模式下运行吗？因为，不管您的代码中有多个问题，

Summary

组件应该可以工作。我只是在webpack默认情况下以任何模式运行它。我没有意识到这会对代码的运行方式产生影响。我假设它设置了缩小级别之类的。似乎问题在于你的设置。尝试将您的

摘要

组件移动到新的

create react app

项目，您将看到道具类型错误。此外，CRA是一个很好的起点，特别是当你还不能熟练使用webpack等环境设置时。在Q:ShareWebpackConfig和任何其他安装文件上，这样我们就可以了解它了。谢谢你的建议。我目前正在尝试学习如何在没有CRA的情况下使用环境，因为我发现，如果将代码放入一个为我设置的环境中而没有任何解释，我很难相信我的代码会运行。这就像在生产环境中运行ubuntu，而没有任何gentoo的经验。当然，你的东西今天能用，但你不知道为什么，如果它坏了，你不知道从哪里开始修复任何东西。你告诉我问题出在网页包中，现在我知道了一些我昨天没有知道的事情。我完全没有料到javascript文件中的不同分支会根据文件打包程序中的配置运行或不运行，而我没有显式地编写代码来检查环境变量。如果我使用CRA，我永远不会知道这一点，这可能是灾难性的。