wie verwenden Sie reagieren in Codepen mit es6

http://codepen.io/JessieZhou/pen/VPgMdP ,Hier ist eine demo mit Reagieren auf CodePen, aber der browser gibt eine Fehlermeldung "Uncaught ReferenceError: die Komponente ist nicht definiert". Allerdings, wenn ich eine Linie einfügen "importieren" {Component} von 'reagieren'" in der ersten Zeile, wird der Fehler "Uncaught ReferenceError: require ist nicht definiert". Ist es möglich, dass die Verwendung von 'class', der das problem verursacht?

Hier ist mein code:

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

Hier ist mein javascript-Einstellungen in CodePen:
javascript-Einstellungen in codepen

InformationsquelleAutor JessieZhou | 2017-02-14
  1. 6

    Grund ist die Komponente ist Teil Reagieren, access, die Sie verwenden müssen, zu Reagieren.Komponente, wenn Sie direkt verwenden möchten Komponente, dann erst importieren von react wie diese:

    import {Component} from 'react';

    Verwenden:

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

    Überprüfen codepen

    • Ich danke Ihnen sehr! Verwenden Sie Reagieren.Komponente funktionieren wird, aber wenn ich verwenden möchten Bauteil", import {Component} von 'reagieren'" immer noch nicht funktioniert, wird der Fehler "Uncaught ReferenceError: require ist nicht definiert"...
    • verwenden Sie diese Linie im ur-Projekt, es wird funktionieren, in codepen wir verwendet, um zu verwenden lib-links, das ist, warum wir haben, zu verwenden vervollständigen Reagieren.Komponente.
    InformationsquelleAutor Mayank Shukla
  2. 2

    Bemerkte ich, dass process.env.NODE_ENV ist undefiniert in ReactDOM 16.2 js-Datei, wenn Sie importieren Sie das CDN aus Quick-add.

    Die Lösung ist die Verwendung die Entwicklung reagieren und ReactDOM Module aus unpkg.com:

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

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

    Gibt es das Beispiel funktioniert auf Reagieren 16.2: CodePen

    InformationsquelleAutor FisNaN
  3. 1

    Komponente ist eine Unterklasse von reagieren. Also entweder Sie importieren oder verwenden React.Component
    Beim Rendern verwenden Sie die jsx
    MyInput wird nicht funktionieren. <MyInput/> arbeiten 

    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'));
    InformationsquelleAutor DroidNoob
  4. 1

    Können Sie tun class MyInput extends React.Component oder wechseln Sie zu Webpackbin

    • Danke sehr viel~ ich werde versuchen Webpackbin später~
    InformationsquelleAutor Avraam Mavridis
  5. 0

    Verlängerung React.Component, nicht nur Component.

    Und Sie machen zu müssen <MyInput /> statt MyInput.

    Versuchen, diese stattdessen

    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'));
    InformationsquelleAutor Dan Andersson
Schreibe einen Kommentar