React не определен в простом React компоненте (Universal)

Question

Я использую 15.0.1 и с помощью React создать универсальное приложение

я получал Реагировать не определен в следующем компоненте

import {Component} from "react"; 

export default class HeroSearchView extends Component{ 

    render() { 

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

следующий вызов кода, который Реагировать компонент

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) 

Я вроде царапин моей головы теперь, что означает следующее сообщение ...

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) 

[Примечание]: Если удалить <HomeSearchView /> из моего примера кода, он отлично работает ...

Любые советы будут оценены ...

Answer 1

Вы должны использовать

import React from "react"

и

export default class HeroSearchView extends React.Component

Это потому, что JSX конвертировать файл в фактических JS, называющих React.createElement, и потому, что вы только импортирован Component от реакции, она не может найти ссылки на React

Answer 2

import React from "react"; 

export default class HeroSearchView extends React.Component{ 

    render() { 

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

Изменение этого и он будет работать ,

Answer 3

Вы можете сделать что-то подобное, чтобы ваш код был аккуратным.

import React, {Component} from "react"; 
 

 
export default class HeroSearchView extends Component { 
 

 
    render() { 
 

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

Answer 4

Если вы используете Rails, то возможной причиной ошибки является то, что вы добавили //= require react //= require react_ujs //= require components в ваши приложения/активы/JavaScripts/application.js