反應：無狀態功能組件中的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, 
};