2016-11-24 6 views
0

最も外側のコンポーネントではないコンポーネントChannelSection.jsxを作成しました.App.jsxは最も外側のコンポーネントになります。私のChannelSectionは親コンポーネントから小道具を受け取る必要があります。PropType.funcを読み取ることができないのはなぜですか?

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')); 
+0

タイトルはPropTypeを使用しているアプリでどこにもPropTypeを確実にしていますか?投稿したスニペットは正しく見え、PropTypeを適切に使用しますが、PropTypeを別の場所に置くことも可能です。 – kwelch

+0

ChannelForm.jsxの@kwelch、good call、小文字のPropTypeがいくつかありました。あなたの回答を回答として投稿してください。私はそれをチェックし、あなたの助けに感謝します。 – Daniel

+0

助けてくれてうれしいです。 – kwelch

答えて

2

必ずすべてReact.PropTypesを使用してください。それは複数であり、どちらの場合も問題である。

更新

React.PropTypesが廃止されます。デフォルトのエクスポートPropTypesを持つprop-typesnpmパッケージを使用してください。

パッケージのPropTypesを使用している場合は、react-codemodを使用してプロジェクトを更新できます。

関連する問題