O React não é definido no componente de reacção simples (Universal)

Question

O React não é definido no componente de reacção simples (Universal)

estou a usar o 15. 0. 1 e a usar o React para criar o aplicativo Universal

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

o seguinte código chama esse componente React

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)

Estou a coçar a cabeça agora, o que significa a seguinte mensagem ...

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)

[ nota] : Se eu remover <HomeSearchView /> do meu código de exemplo, ele funciona bem ...

qualquer dica será apreciada ...

2

node.js reactjs isomorphic

Author: R.R, 2016-04-13

Source

4 answers

score 2 · Answer 1

Tem de utilizar

import React from "react"

E

export default class HeroSearchView extends React.Component

Isto é porque o JSX converte o seu ficheiro para o JS real que chama React.createElement, e porque só importou Component do react, não conseguiu encontrar referências ao React

score 1 · Answer 2

Podes fazer uma coisa destas para manter o teu código arrumado.

import React, {Component} from "react";

export default class HeroSearchView extends Component {

    render() {

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

score 1 · Answer 3

Se você está usando trilhos, então a possível causa de erro é que você adicionou

//= require react
    //= require react_ujs
    //= require components

para a sua aplicação / activos/javascripts / aplicação.js

score 0 · Answer 4

import React from "react";

export default class HeroSearchView extends React.Component{

    render() {

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

Muda para isto e vai funcionar.