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/