如何Codepen使用與反應器ES6

Question

http://codepen.io/JessieZhou/pen/VPgMdP，下面是一個使用作出反應CodePen演示，但是瀏覽器提供了一個錯誤「未捕獲的ReferenceError：組件沒有定義」。但是，如果我在第一行插入一行「從'react'」導入{Component}，則錯誤將爲「Uncaught ReferenceError：require is not defined」。 'class'的使用是否有可能導致這個問題？

這裏是我的代碼：

//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或切換到Webpackbin

Answer 4

必須擴展React.Component，不只是Component。

而且你要渲染<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 5

我注意到，process.env.NODE_ENV在ReactDOM16.2 js文件未定義，如果從導入CDN快速增加。
解決方案是使用開發從unpkg.com反應，ReactDOM模塊：

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

還有就是例子工程上反應16.2：CodePen