陣營：類型錯誤：無法調用類的函數

我有這個簡單的代碼：陣營：類型錯誤：無法調用類的函數

class App extends Component { 

     render() { 
      return (
       <div> 
        <PanelPayment /> 
       </div> 
      ); 
     } 
    } 
    export default App

而且這樣的：

export default class PanelPayment { 
    render() { 
     return (
      <div> 
       <button>Pay now!</button> 
      </div> 
     ) 
    } 
}

而且我得到錯誤：

TypeError: Cannot call a class as a function

class.App.js:66 Uncaught TypeError: Cannot call a class as a function 
at _classCallCheck (class.App.js:66) 
at PanelPayment (class.PanelPayment.js:3) 
at ReactCompositeComponent.js:305 
at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304) 
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187) 
at Object.mountComponent (ReactReconciler.js:45) 
at ReactDOMComponent.mountChildren (ReactMultiChild.js:236) 
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703) 
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522) 
at Object.mountComponent (ReactReconciler.js:45) 
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) 
at Object.mountComponent (ReactReconciler.js:45) 
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) 
at Object.mountComponent (ReactReconciler.js:45) 
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257) 
at Object.mountComponent (ReactReconciler.js:45) 
at mountComponentIntoNode (ReactMount.js:104) 
at ReactReconcileTransaction.perform (Transaction.js:143) 
at batchedMountComponentIntoNode (ReactMount.js:126) 
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143) 
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62) 
at Object.batchedUpdates (ReactUpdates.js:97) 
at Object._renderNewRootComponent (ReactMount.js:319) 
at Object._renderSubtreeIntoContainer (ReactMount.js:401) 
at Object.render (ReactMount.js:422) 
at Object../src/index.js (index.js:15) 
at __webpack_require__ (bootstrap de5a69c98061cf2fbc7c:669) 
at fn (bootstrap de5a69c98061cf2fbc7c:87) 
at Object.0 (registerServiceWorker.js:108) 
at __webpack_require__ (bootstrap de5a69c98061cf2fbc7c:669) 
at bootstrap de5a69c98061cf2fbc7c:715 
at bundle.js:719

請讓我知道我做錯了什麼。

來源

2017-08-22 Division by Zero

Didnt你忘記延長'PanelPayment'爲React.Component類？你在第一個例子嗎？試試這樣做'出口默認類PanelPayment擴展Component' –

是啊:)謝謝！ –

你忘記它延伸React.Component類：

export default class PanelPayment extends Component{ 
render() { 
    return (
     <div> 
      <button>Pay now!</button> 
     </div> 
    ) 
} 
}

來源

2017-08-22 03:33:15

首先每個陣營類必須從Component類繼承。目前您的PanelPayment類不是！
其次，在單個js文件中，只能有1個默認類。如果您將這兩個類都放在單個文件中，那麼您只能將其中一個導出爲默認值。

來源

2017-08-22 04:19:28

您應該聲明PanelPayment作爲響應組件。

class PanelPayment extends Component{ 
 
render() { 
 
    return (
 
     <div> 
 
      <button>Pay now!</button> 
 
     </div> 
 
    ) 
 
} 
 
} 
 
export default PanelPayment

來源

2017-08-22 05:51:59 taryn

陣營：類型錯誤：無法調用類的函數

回答

相關問題