반응 무 상태 예제

Question

그래서 저는 React를 배우기 시작했습니다. 그리고 여기 제가 작업하고있는 첫 번째 상태 예제가 있습니다. 여기

코드입니다 : - 여기에 콘솔에서 오류의

<div id="app"></div> 
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> 
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> 
<script>   

    //main render 
    ReactDOM.render(
     React.createElement(TextAreaCounter, {text: 'Bob'}), 
     document.getElementById("app") 
    ); 

    //create component now 
    var TextAreaCounter = React.createClass({ 

     propTypes: { 
      text: React.propTypes.string, 
     }, 

     getDefaultProps: function() { 
      return { 
       text: '', 
      }; 
     }, 

     render: function(){ 
      return React.DOM.div(null, 
       React.DOM.textarea({ 
        defaultValue: this.props.text, 
       }), 
       React.DOM.h3(null, this.props.text.length) 
      ); 
     }   

    }); 

</script> 

:

react.js:20150 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
    at invariant (react.js:20150) 
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (react.js:18327) 
    at ReactCompositeComponentWrapper.performInitialMount (react.js:6256) 
    at ReactCompositeComponentWrapper.mountComponent (react.js:6139) 
    at Object.mountComponent (react.js:13787) 
    at mountComponentIntoNode (react.js:11873) 
    at ReactReconcileTransaction.perform (react.js:16987) 
    at batchedMountComponentIntoNode (react.js:11895) 
    at ReactDefaultBatchingStrategyTransaction.perform (react.js:16987) 
    at Object.batchedUpdates (react.js:10324) 

잘못 여기 뭐하는 거지? 나는 콘솔에서받은 에러를 인터넷으로 검색하는 해결책을 찾으려고 노력했지만 아무런 도움이되지 못했습니다. 이것에 대한 전문가의 의견을 얻는 것이 좋을 것입니다.

Answer 1

제 생각에는 TextAreaCounter을 먼저 정의한 다음 ReactDOM.render을 사용하여 TextAreaCounter 구성 요소를 렌더링해야합니다.

TextAreaCounter is not defined.

해서 :

이유는 대신 var의 let으로 그 변수를 정의하는 경우는 오류가 발생한다 undefined 될 것 TextAreaCounter의 ReactDOM.render 값 TextAreaCounter 렌더링의 시간이 될 것입니다 var의 경우 오류가 표시되지 않으므로 let과 var 사이의 차이점을 읽어 보시기 바랍니다. 이 answer을 확인하십시오. 이 같은

쓰기 그것은, 그것은 작동이 코드를 실행합니다 :

<div id="app"></div> 
 
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> 
 
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> 
 
<script > 
 

 
    var TextAreaCounter = React.createClass({ 
 

 
      getDefaultProps: function() { 
 
       return { 
 
        text: '', 
 
       }; 
 
      }, 
 

 
      render: function() { 
 
       return React.DOM.div(null, 
 
       React.DOM.textarea({ 
 
        defaultValue: this.props.text, 
 
       }), 
 
       React.DOM.h3(null, this.props.text.length) 
 
      ); 
 
      } 
 
    }); 
 

 
    ReactDOM.render(
 
      React.createElement(TextAreaCounter, {text: 'Bob'}), 
 
      document.getElementById("app") 
 
    ); 
 

 
</script>

Answer 2

당신은 단지 당신이 훨씬 더 이해하기 쉽게하는 JSX을 배울 추천 반작용 학습하는 경우. 이 경우 코드는

<div id="app"></div> 
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> 
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    <script type="text/babel"> 
     var TextAreaCounter = React.createClass({ 
      getDefaultProps: function() { 
       return { 
        text: '', 
       }; 
      }, 
      render: function() { 
       return (
        <div> 
        <textarea defaultValue={this.props.text}></textarea> 
        <h3>{this.props.text.length}</h3> 
       </div> 
       ); 
      } 
     }); 
      ReactDOM.render(
      <TextAreaCounter text='Bob' /> ,document.getElementById("app") 
     ); 
     </script> 

이 튜토리얼을 시도 할 것 https://www.sitepoint.com/getting-started-react-jsx/