comment utiliser réagir dans Codepen avec es6

Question

http://codepen.io/JessieZhou/pen/VPgMdP, Voici une démo utilisant React dans CodePen, mais le navigateur donne une erreur "Uncaught ReferenceError: Component is not defined". Cependant, si j'insère une ligne "import {Component} de 'react'" dans la première ligne, l'erreur sera "Uncaught ReferenceError: require n'est pas défini". Est-il possible que l'utilisation de «classe» provoque ce problème?

Voici mon code:

//import {Component} from 'react' 
class MyInput extends Component{ 
    constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e){ 
    this.props.update(e.target.value); 
    } 

    render(){ 
    return <input onChange={this.handleChange} type="text"/> 
    } 
} 
ReactDOM.render(MyInput, document.getElementById('myinput')); 

Voici mes paramètres javascript dans CodePen: javascript settings in codepen

Answer 1

La raison est le composant fait partie de React, d'accès que vous devez utiliser React.Component, si vous voulez directement utiliser le composant, puis d'abord l'importer à partir react, comme ceci:

import {Component} from 'react'; 

utilisez cette :

class MyInput extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e){ 
    console.log('e', e.target.vaule); 
    } 
    render(){ 
    return <input onChange={this.handleChange} type="text"/> 
    } 
} 
ReactDOM.render(<MyInput/>, document.getElementById('myinput')); 

Vérifier codepen

Answer 2

Component est une sous-classe de réagir. Donc soit vous l'importez, soit vous utilisez React.Component Pendant le rendu, vous devez utiliser jsx MyInput ne fonctionnera pas. <MyInput/> travaillera

class MyInput extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e){ 
    this.props.update(e.target.value); 
    } 
    render(){ 
    return <input onChange={this.handleChange} type="text"/> 
    } 
} 
ReactDOM.render(<MyInput/>, document.getElementById('myinput')); 

Answer 3

Vous pouvez faire class MyInput extends React.Component ou passer à Webpackbin

Answer 4

Vous devez étendre React.Component, non seulement Component.

Et vous devez rendre <MyInput /> au lieu de MyInput.

Essayez plutôt

class MyInput extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e){ 
    this.props.update(e.target.value); 
    } 
    render(){ 
    return <input onChange={this.handleChange} type="text"/> 
    } 
} 

ReactDOM.render(<MyInput />, document.getElementById('myinput')); 

Answer 5

J'ai remarqué que process.env.NODE_ENV n'est pas défini dans ReactDOM16,2 dossier, si vous importez le CDN de rapide ajouter.
La solution est d'utiliser le développement réagir et modules ReactDOM de unpkg.com:

//unpkg.com/react/umd/react.development.js
//unpkg.com/react-dom/umd/react-dom.development.js

Il est l'exemple fonctionne sur React 16,2: CodePen