Question

http://codepen.io/JessieZhou/pen/VPgMdP，这是一个在CodePen中使用React的演示，但浏览器会出现错误＆＃34; Uncaught ReferenceError：Component未定义＆＃34;。但是，如果我插入一行＆＃34;导入{组件}来自＆＃39;反应＆＃34;＆＃34;在第一行中，错误将是＆＃34; Uncaught ReferenceError：require未定义＆＃34;。是否有可能使用＆＃39; class＆＃39;导致这个问题？

这是我的代码：

//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

如果您从快速添加导入CDN，我注意到process.env.NODE_ENV 16.2 js文件中的ReactDOM未定义。
解决方案是使用来自unpkg.com的开发反应和ReactDOM模块：

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

示例适用于React 16.2：CodePen

Answer 3

Component是react的子类。因此，您要么导入它，要么使用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 4

您可以class MyInput extends React.Component或切换到Webpackbin

Answer 5

您必须延长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 6

使用解构分配来获取React.Component，而不是使用import。通过js设置将响应添加到codepen后，它将执行脚本，使React在全局范围，窗口中可用。

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

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

7 个答案: