如何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