web-dev-qa-db-ja.com

Codepenでes6を使用してreactを使用する方法

http://codepen.io/JessieZhou/pen/VPgMdP 、これはCodePenでReactを使用したデモですが、ブラウザで「Uncaught ReferenceError：Component」というエラーが表示されます。が定義されていません」。ただし、最初の行に「import {Component} from'react '」という行を挿入すると、エラーは「Uncaught ReferenceError：require isnotdefined」になります。'クラスの使用法は可能ですか？ 'この問題を引き起こしますか？

これが私のコードです：

//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設定は次のとおりです。 codepenのJavaScript設定

reactjsecmascript-6codepen
8
JessieZhou

Reason is 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

6
Mayank Shukla

きがついた process.env.NODE_ENVはReactDOM16.2jsファイルで未定義ですQuick-からCDNをインポートする場合add。
解決策は、unpkg.comの開発reactモジュールとReactDOMモジュールを使用することです。

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

React 16.2： CodePen で動作する例があります

2
FisNaN

コンポーネントは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'));
1
DroidNoob

できるよ class MyInput extends React.Componentまたは Webpackbin に切り替えます

1
Avraam Mavridis

Componentだけでなく、React.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'));
0
Dan Andersson

インポートを使用する代わりに、非構造化割り当てを使用してReact.Componentを取得します。 js設定を介してcodepenにreactを追加した後、スクリプトを実行してReactをグローバルスコープ、ウィンドウで使用できるようにします。

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