React無狀態示例

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組件。

原因會，在中TextAreaCounterReactDOM.render值呈現TextAreaCounter的時間將undefined，如果你定義一個變量let代替var它應該拋出錯誤：

TextAreaCounter is not defined.

只是因爲的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/