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
4 answers
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
2
Author: Alexander, 2016-04-13 04:28:50
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>
);
}
}
1
Author: Dauren Akilbekov, 2016-04-13 05:09:07
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
1
Author: Andrey, 2017-12-20 11:46:19
import React from "react";
export default class HeroSearchView extends React.Component{
render() {
return (
<div className='row'>
hello
</div>
);
}
}
Muda para isto e vai funcionar.
0
Author: Amit, 2016-04-13 04:51:07