Warum kann PropType.func nicht gelesen werden?

Question

Ich habe eine Komponente ChannelSection.jsx erstellt, die nicht die äußerste Komponente ist, App.jsx wird die äußerste Komponente sein. Meine ChannelSection muss Requisiten von der übergeordneten Komponente erhalten. So fügten die prop Typen unten:

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 

Und ich erhalte diesen Fehler in der Konsole, und ich bin nicht sicher, warum, und ich brauche etwas Hilfe in dieser Fehlerbehebung:

Uncaught TypeError: Cannot read property 'func' of undefined 

Meine App.jsx Datei:

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 

meine index.js Datei:

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

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

Answer 1

Stellen Sie sicher, dass Sie in allen Fällen React.PropTypes verwenden. Es ist Plural und beides ist wichtig.

aktualisieren

React.PropTypes ist veraltet. Bitte verwenden Sie das prop-typesnpm Paket, das einen Standard-Export PropTypes hat.

Diejenigen, die PropTypes aus dem react Paket verwenden, können Sie react-codemod verwenden, um Ihr Projekt zu aktualisieren.