反応無応答の例

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。あなたはちょうど私があなたを理解する方がはるかに簡単である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 > 
 

 
    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

：

はこのようにそれを書く、それがこのスニペットを実行し、動作します。その場合、あなたのコードは、

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

このチュートリアルを試すだろう