[英]PropTypes doesn't work in React
I am running React 16.2.0 and I am using PropTypes 15.6.1.我正在运行 React 16.2.0,我正在使用 PropTypes 15.6.1。 I am using ES6 syntax and Webpack.
我正在使用 ES6 语法和 Webpack。
I am trying to make PropTypes throw a warning when I pass invalid props, but it doesn't work.当我传递无效的道具时,我试图让 PropTypes 发出警告,但它不起作用。 This is the code:
这是代码:
SimpleMessage.js简单消息.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
index.js索引.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 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
})
]
}
As you might notice I am passing a string ("Hello World") but checking for a function in proptypes.正如您可能注意到的那样,我正在传递一个字符串(“Hello World”),但正在检查 proptypes 中的函数。 I don't get any errors or warnings by proptypes, and the code runs just fine.
我没有通过 proptypes 收到任何错误或警告,并且代码运行得很好。
Working as expected :按预期工作:
Warning: Failed prop type: Invalid prop
message
of typestring
supplied toSimpleMessage
, expectedfunction
.警告:失败的道具类型:提供给
SimpleMessage
string
类型的无效道具message
,预期function
。
Be sure to check your browser console, this is where errors are displayed.请务必检查您的浏览器控制台,这是显示错误的地方。
https://codepen.io/anon/pen/paGYjm?editors=1111 https://codepen.io/anon/pen/paGYjm?editors=1111
Also :还 :
You shouldn't apply UglifyJsPlugin or DefinePlugin with 'production' value in development because they will hide useful React warnings, and make the builds much slower.
你不应该在开发中应用 UglifyJsPlugin 或 DefinePlugin 的 'production' 值,因为它们会隐藏有用的 React 警告,并使构建速度变慢。
That's because you've defined propType
as function
, but you're sending it as a string
.那是因为您已将
propType
定义为function
,但您将其作为string
发送。
Change the code to message: PropTypes.string
将代码更改为
message: PropTypes.string
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.