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：无法将类称为函数

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>
     )
 }
}

Answer 2

您应该将PanelPayment声明为反应组件。

＆＃13;

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

＆＃13;

Answer 3

首先，每个React类必须继承自Component类。目前您的PanelPayment课程不是！
其次，在单个js文件中，只能有一个默认类。如果您将这两个类都放在单个文件中，那么您只能导出其中一个作为默认值。

React：TypeError：无法将类调用为函数

3 个答案: