javascript - 为什么无法读取PropType.func？

Question

我创建了一个组件ChannelSection.jsx，它不是最外面的组件，App.jsx将是最外面的组件。我的 ChannelSection 将需要从其父组件接收 props。因此添加了以下 Prop 类型:

ChannelSection.jsx:

import React, {Component} from 'react';
import ChannelForm from './ChannelForm.jsx';
import ChannelList from './ChannelList.jsx';

class ChannelSection extends Component {
    render(){
        return (
            <div>
                <ChannelList {...this.props} />
                <ChannelForm {...this.props} />
            </div>
        )
    }
}

ChannelSection.propTypes = {
    channels: React.PropTypes.array.isRequired,
    setChannel: React.PropTypes.func.isRequired,
    addChannel: React.PropTypes.func.isRequired
}

export default ChannelSection

我在控制台中收到此错误，我不确定为什么，我需要一些帮助来解决此问题:

Uncaught TypeError: Cannot read property 'func' of undefined

我的 App.jsx 文件:

import React, {Component} from 'react';
import ChannelSection from './channels/ChannelSection.jsx';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            channels: []
        };
    }
    addChannel(name){
        let {channels} = this.state;
        channels.push({id: channels.length, name});
        this.setState({channels});
        // TODO: Send to Server
    }
    setChannel(activeChannel){
        this.setState({activeChannel});
        // TODO: Get Channel Messages
    }
    render(){
        return (
            <ChannelSection  
              channels={this.state.channels} 
              addChannel={this.addChannel.bind(this)}
              setChannel={this.setChannel.bind(this)} />
        )
    }
}

export default App

我的index.js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(App, document.getElementById('root'));

Answer 1

确保在所有情况下都使用 React.PropTypes。复数和大小写都很重要。

更新

React.PropTypes 现已弃用。请使用 prop-types npm 包，它具有默认导出 PropTypes。

如果使用 react 包中的 PropTypes，您可以使用 react-codemod 来更新您的项目。