我想将字符串从 Main 传递到 Header。它成功但警告。我是 React 的初学者,所以我不明白
it must be a function
是什么意思。
有人知道如何解决这个警告吗?
警告是:
我的代码如下:
Main.js
import React from 'react';
import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';
const propTypes = {
mainInfo: React.PropTypes.shape({
title: React.PropTypes.string.isRequired,
apps: React.PropTypes.array.isRequired,
}),
};
class Main extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return (
<div>
<Header title={this.props.mainInfo.title} />
<AppList apps={this.props.mainInfo.apps} />
<Footer />
</div>
);
}
}
Main.propTypes = propTypes;
export default Main;
Header.js
import React from 'react';
const propTypes = {
title: React.PropTypes.string.isRequred,
};
class Header extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return (
<div className="header">
<h1>{this.props.title}</h1>
</div>
);
}
}
Header.propTypes = propTypes;
export default Header;
您有一个错误:
React.PropTypes.string.isRequred
。正确拼写isRequired
,应该没问题。
当您的 PropType 实际上是
undefined
时,就会发生这种情况。
在我的例子中,我指定了
PropTypes.integer
的 propType,它不是 proptypes 列表之一。这实际上变成了undefined
。相反,我应该使用PropTypes.number
。
请注意
PropTypes.bool
与 PropTypes.boolean
以及 PropTypes.func
与 PropTypes.function
之间的类似错误。
此外,它是布尔值的
bool
。我浏览了文档并遇到了完全相同的问题,直到我回去仔细阅读它们。
https://facebook.github.io/react/docs/typechecking-with-proptypes.html
例如
React.PropTypes.sting
React.PropTypes.text
React 还可以告诉用户:“您定义的 PropType 'sting' 未定义。您是否拼写错误?可用的 PropType 包括:字符串、数字、布尔值等。”
就我而言,当我声明
Component.propTypes
及其下方时,我没有写 Component.defaultProps
,而是再次写了 Component.propTypes
分配默认值。
三步解决问题的简单方法:
npm prop-types install
);代码:
import PropTypes from 'prop-types';
React
关键字(例如:React.PropTypes.string.isRequired to PropTypes.string.isRequired
取决于您的语句,因此只需删除 React
关键字,因为您现在是从 prop-types 导入,而不是从反应库。类似
isRequred
而不是isRequired
的事情发生在我身上。我正在尝试定义默认道具,但复制粘贴了propTypes并且从未更改名称,所以我最终得到了这样的结果:
import PropTypes from 'prop-types'
const Main = ({ title }) => // whatever
Main.propTypes = {
title: PropTypes.string
}
Main.propTypes = { // this should have been Main.defaultProps! 🤦♂️
title: 'This is the default title!'
}
所以 PropTypes 抱怨
title
的 prop 类型不正确。它说的是“它必须是一个函数,通常来自 React.PropTypes,但它是一个字符串”。
我以为我要疯了。我正在查看第一个
Main.propTypes
,并试图找到拼写错误或任何可能错误的地方,但正如你所看到的,它完全没问题。我打开了多个定义了 prop 类型的文件,但没有抛出错误。
我显然找错了地方,但最终还是运气不好找到了它。我很幸运能够真正找到它。这些捂脸的虫子很难弄清楚,因为它们就像魔术师移动一只手来吸引所有的目光,同时用另一只手准备魔术,通常是在众目睽睽之下。
由于拼写问题,我们收到警告
错误:
Component.propTypes = {
allowChannel: PropTypes.boolean,
showDisabled: PropTypes.boolean,
}
解决方案:
Component.propTypes = {
allowChannel: PropTypes.bool,
showDisabled: PropTypes.bool,
}