3

I'm using 15.0.1 and using React to create Universal app

I was getting React is not defined in the following component

import {Component} from "react";

export default class HeroSearchView extends Component{

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

The following code call that React component

import React from "react";
import { connect } from 'react-redux'
import Coupon from '../../common/components/Coupon'
import { actions as miscActions } from '../../redux/modules/misc'
import HeroSearchView from './components/HeroSearchView'


const mapStateToProps = (state) => ({
    misc:state.misc
})

export class HomeView extends React.Component{
    render() {

        return (
            <div>
                <HeroSearchView  />
                <Coupon {...this.props} />
            </div>
        );
    }
}

export default connect(mapStateToProps, Object.assign({}, miscActions))(HomeView)

I'm kind of scratching my head now what the following message means ...

ReferenceError: React is not defined
    at HeroSearchView.render (HeroSearchView.jsx:8:13)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:679:34)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:699:32)
    at [object Object].wrapper [as _renderValidatedComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:284:30)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:237:21)
    at [object Object].wrapper [as mountComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactReconciler.js:39:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactMultiChild.js:203:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactDOMComponent.js:589:32)

[ Note ] : If I remove <HomeSearchView /> from my example code, it works fine ...

Any tips will be appreciated ...

4

4 回答 4

8

你需要使用

import React from "react"

和

export default class HeroSearchView extends React.Component

这是因为 JSX 将您的文件转换为调用的实际 JS React.createElement，并且因为您只Component从 react 导入，所以它找不到对React

于 2016-04-13T04:28:50.300 回答
2

你可以做这样的事情来保持你的代码整洁。

import React, {Component} from "react";

export default class HeroSearchView extends Component {

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}
于 2016-04-13T05:09:07.713 回答
0

如果您使用的是 Rails，那么可能的错误原因是您添加 //= require react //= require react_ujs //= require components 到了您的 app/assets/javascripts/application.js

于 2017-12-20T11:46:19.307 回答
0 
import React from "react";

export default class HeroSearchView extends React.Component{

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

更改为此，它将起作用。

于 2016-04-13T04:51:07.297 回答