在 React 中,我编写了一个无状态功能组件,现在想为其添加 Prop Type 验证。
列表
组件:
import React from 'react';
import PropTypes from 'prop-types';
function List(props) {
const todos = props.todos.map((todo, index) => (<li key={index}>{todo}</li>));
return (<ul></ul>);
}
List.PropTypes = {
todos: PropTypes.array.isRequired,
};
export default List;
App
组件,渲染List
:
import React from 'react';
import List from './List';
class App extends React.Component {
constructor() {
super();
this.state = {
todos: '',
};
}
render() {
return (<List todos={this.state.todos} />);
}
}
export default App;
正如您在 App
中看到的,我将 this.state.todos
传递给 List
。由于 this.state.todos
是一个字符串,我希望 Prop Type 验证能够启动。相反,我在浏览器控制台中收到错误,因为字符串没有名为 map< 的方法
.
为什么 Prop 类型验证没有按预期工作?看看this question ,情况看起来是一样的。
最佳答案
您应该将属性的大小写更改为 propTypes
:
- List.PropTypes = {
+ List.propTypes = {
todos: PropTypes.array.isRequired,
};
正确:
List.<b>propTypes</b> = {
todos: PropTypes.array.isRequired,
};
(PropTypes 对象的实例为小写,但类/类型为大写。实例为 List.propTypes
。类/类型为 PropTypes
。)
关于reactjs - react : PropTypes in stateless functional component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45398709/