阵营：类型错误：无法调用类的函数

我有这个简单的代码：阵营：类型错误：无法调用类的函数

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

阵营：类型错误：无法调用类的函数

回答

相关问题