PropTypes 在 React 中不起作用

Question

我正在运行 React 16.2.0，我正在使用 PropTypes 15.6.1。 我正在使用 ES6 语法和 Webpack。

当我传递无效的道具时，我试图让 PropTypes 发出警告，但它不起作用。 这是代码：

简单消息.js

import React from "react"
import PropTypes from "prop-types"

class SimpleMessage extends React.Component {
    render() {
        return(
            <p>{this.props.message}</p>
        )
    }
}

SimpleMessage.propTypes = {
    message: PropTypes.func
}

export default SimpleMessage

索引.js

import React from "react"
import ReactDOM from "react-dom"

import SimpleMessage from "./components/SimpleMessage"

window.React = React

ReactDOM.render(
    <SimpleMessage message={"Hello World"} />,
    document.getElementById("react-container")
)

webpack.config.js

var webpack = require("webpack")
var path = require("path")

process.noDeprecation = true

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, 'dist', 'assets'),
        filename: "bundle.js",
        sourceMapFilename: 'bundle.map'
    },
    devtool: '#source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader', {
                    loader: 'postcss-loader',
                    options: {
                      plugins: () => [require('autoprefixer')]
                    }}]
            },
            {
                test: /\.scss/,
                use: ['style-loader','css-loader', {
                    loader: 'postcss-loader',
                    options: {
                      plugins: () => [require('autoprefixer')]
                    }}, 'sass-loader']
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            warnings: false,
            mangle: false
        })
    ]

}

正如您可能注意到的那样，我正在传递一个字符串（“Hello World”），但正在检查 proptypes 中的函数。 我没有通过 proptypes 收到任何错误或警告，并且代码运行得很好。

Answer 1

按预期工作：

警告：失败的道具类型：提供给SimpleMessage string类型的无效道具message ，预期function 。

请务必检查您的浏览器控制台，这是显示错误的地方。

https://codepen.io/anon/pen/paGYjm?editors=1111

---

还 ：

你不应该在开发中应用 UglifyJsPlugin 或 DefinePlugin 的 'production' 值，因为它们会隐藏有用的 React 警告，并使构建速度变慢。

来源

Answer 2

那是因为您已将propType定义为function ，但您将其作为string发送。

将代码更改为message: PropTypes.string