反应：无状态功能组件中的PropType

Question

在React中，我编写了一个无状态功能组件，现在想要为其添加Prop类型验证。

List组件：

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.todosList。由于this.state.todos是一个字符串，因此我期望使用Prop Type验证。相反，在浏览器控制台中出现错误，因为字符串没有名为map的方法。

为什么Prop Type验证不能按预期工作？羚牛看一下this question，案件看起来一样。

Answer 1

你应该改变

List.PropTypes = { 
    todos: PropTypes.array.isRequired, 
}; 

到

List.propTypes = { 
    todos: PropTypes.array.isRequired, 
};