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中ReactDOM.render的{{1}}值将TextAreaCounter为undefined，如果您定义该变量如let而不是var它应该抛出错误：

TextAreaCounter未定义。

由于var，您没有收到该错误，我建议您也阅读 let和var 之间的区别。请检查此answer。

像这样写，它会起作用，运行这个片段：

＆＃13;

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

＆＃13;

Answer 2

如果您刚学习React，我建议您学习更容易理解的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/

反应无状态的例子

2 个答案: