反应：TypeError：无法将类作为函数调用

Question

I have this simple code:

    class App extends Component {

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

And this:

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

And I am getting error:

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

Please let me know what I am doing wrong.

Answer 1

You forget extend it as React.Component class:

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

Answer 2

You should declare PanelPayment as a react component.

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

Answer 3

• Firstly each React class must inherit from Component class. Currently your PanelPayment class is not!
• Secondly in a single js file, there can be only 1 default class. In case you have both the classes in single file then you can export only one of them as default.