javascript - react : TypeError: Cannot call a class as a function

Question

我有这个简单的代码:

    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

请让我知道我做错了什么。

Answer 1

你忘记将它扩展为 React.Component 类:

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