Codepen에서 es6을 사용하여 반응하는 방법

http://codepen.io/JessieZhou/pen/VPgMdP 다음은 CodePen에서 React를 사용하는 데모이지만 브라우저는 "Uncaught ReferenceError : Component is not defined"오류 메시지를 표시합니다. 그러나 첫 번째 줄에 "react {from {Component}"가져 오기} 줄을 삽입하면 "Uncaught ReferenceError : require is not defined"오류가 발생합니다. '클래스'를 사용하면이 문제가 발생할 수 있습니까? 여기 Codepen에서 es6을 사용하여 반응하는 방법

내 코드입니다 :

여기

//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 settings in codepen

출처

2017-02-14 JessieZhou

이유가 있다면, 당신은 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

출처

2017-02-14 09:13:24

가 대단히 감사합니다 :

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

의 예는 16.2 반작용에서 작동 있습니다! 사용 React.Component 작동하지만 구성 요소를 사용하려면 "가져 오기 {Component}에서 '반응'"여전히 작동하지 않는, 오류 "Uncaught ReferenceError : 필요가 정의되지 않았습니다."... – JessieZhou

이 줄을 사용하십시오. 우리가 lib 링크를 사용하기 위해 사용했던 codepen에서, 우리는 완전한 React.Component를 사용해야 만합니다. –

구성 요소는 반응의 서브 클래스입니다. 따라서 가져 오거나 사용하십시오 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'));

출처

2017-02-14 09:18:05 DroidNoob

당신은 class MyInput extends React.Component을 할 수있는 일을하거나 React.Component뿐만 아니라 Component을 확장 당신이 Webpackbin

출처

2017-02-14 09:18:32

대단히 고맙습니다 ~ 나중에 Webpackbin을 사용해 보겠습니다 ~ – JessieZhou

로 전환됩니다.

그리고 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'));

출처

2017-02-14 09:27:01

내가 process.env.NODE_ENV는 당신이 에서 CDN을 가져 오는 경우, ReactDOM16.2 JS 파일에 정의되어 있지 않습니다 것으로 나타났습니다이 시도을 빠른 추가합니다.
이 솔루션은 unpkg.com에서 반응 ReactDOM 모듈을 개발을 사용하는 것입니다 CodePen

출처

2018-02-19 03:32:21 FisNaN

Codepen에서 es6을 사용하여 반응하는 방법

답변

관련 문제