如何在 Codepen 中使用 es6 做出反应

Question

http://codepen.io/JessieZhou/pen/VPgMdP ,这里有一个在CodePen中使用React的demo，但是浏览器报错"Uncaught ReferenceError: Component is not defined"。但是，如果我在第一行插入一行"import {Component} from 'react'"，错误将是"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

原因是Component是React的一部分，要访问它需要使用React.Component，如果你直接想使用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 在 ReactDOM 16.2 js 文件中未定义，如果您从 [=27= 导入 CDN ].
解决方案是使用来自 unpkg.com:

的开发 React 和 ReactDOM 模块

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

有一个适用于 React 16.2 的示例：CodePen

Answer 6

不使用导入，而是使用解构赋值来获取 React.Component。通过 js 设置将 React 添加到 codepen 后，它会执行使 React 在全局范围内可用的脚本，window.

const {Component} = React;
class MyInput extends Component{
    //Component code
}

Answer 7

现在可以直接将 ESM 从 Node 包导入到 Codepen 代码中：

import { default as React } from 'https://cdn.skypack.dev/react@15.4.2';
import { default as ReactDOM } from 'https://cdn.skypack.dev/react-dom@15.4.2';

如何在 Codepen 中使用 es6 做出反应

how to use react in Codepen with es6

ecmascript-6

reactjs

codepen