Codepenでes6と反応する方法

Question

http://codepen.io/JessieZhou/pen/VPgMdPここではCodePenのReactを使ったデモですが、ブラウザーに「Uncaught ReferenceError：Component is not defined」というエラーが表示されます。しかし、最初の行に "react {Component}"という行を挿入すると、 "Uncaught ReferenceError：require is not defined"というエラーが表示されます。 「クラス」の使用がこの問題を引き起こす可能性はありますか？ここで

は私のコードです：

ここ

//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')); 

があるCodePenの私のjavascriptの設定： javascript settings in codepen

Answer 1

理由があれば、あなたがReact.Componentを使用する必要がアクセスするには、コンポーネントが反応の一部でありますあなたが直接コンポーネントを使用したい場合、まずこのように、reactからインポート：

import {Component} from 'react'; 

使用これを：

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

チェックcodepen

Answer 2

コンポーネントが反応するのサブクラスです。だからあなたはそれをインポートするか使用してくださいReact.Component レンダリング中に、あなたはjsx MyInputが役に立った。 <MyInput/>は

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

あなたはclass MyInput extends React.Componentを行うことができます仕事やReact.Componentだけでなく、Componentを拡張する必要はありWebpackbin

Answer 4

に切り替わります。

の代わりに<MyInput />をレンダリングする必要があります。

代わり

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

これを試してみてください、私はprocess.env.NODE_ENVはあなたがからCDNをインポートする場合をクイック追加、ReactDOM16.2のjsファイルで定義されていないことに気づきました。
ソリューションが開発を使用することですがunpkg.comから反応しReactDOMモジュール：

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

例が反応16.2上で動作があります：CodePen