Question

我正在从React.js组件状态的教程中做一些练习。我必须编辑，删除并保存按钮到文档和textarea。我正在尝试这些，但我的浏览器显示我一个空屏幕。我的代码：

<html>
<head>

   <script src = "react-master/../js/react.js"></script>
   <script src = "react-master/../js/react-dom.js"></script>
   <script src = "js/browser.js"></script>

</head>
<body>

    <div id = "example"></div>

    <script type = "text/babel">
        var Comment = React.createClass({
            getInitialState: function(){
                return {editing: false}
            },
            edit: function(){
                this.setState({editing: true});
            },
            remove: function(){
                console.log("Removing comments");
            },
            save: function(){
                this.setState({editing: false});
            },
            renderNormal: function(){
                return(
                    <div className = "comment-container">
                        <div className = "comment-text">{this.props.children}</div>
                        <button onClick = {this.edit}>Edit</button>
                        <button onClick = {this.remove}>Remove</button>
                    </div>
                );
            },
            renderForm: function(){
                return(
                    <div className = "comment-container">
                        <teaxtarea defaultValue = {this.props.children}></teaxtarea>
                        <button onClick = {this.save}>Save</button>
                    </div>
                );
            },
            render: function(){
                if (this.state.editing){
                    return this.renderForm;
                }else{
                    return this.renderNormal;
                }
            }
        });
        ReactDOM.render(
            <div className = "board">
                <Comment>Hey now</Comment>  
                <Comment>Hey Anja</Comment> 
                <Comment>Hey Olga</Comment> 
            </div>,
            document.getElementById("example"));
    </script>

我犯了什么样的错误？

Answer 1

问题是你忘了调用这个函数，使用它：

if (this.state.editing){
    return this.renderForm();
}else{
    return this.renderNormal();
}

还有一件事，我不确定您使用的参考，使用它们将起作用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

检查工作示例：

＆＃13;

<!DOCTYPE html>
<html>
    <head>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

    </head>
    <body>

       <div id = "example"></div>

       <script type = "text/babel">
          var Comment = React.createClass({
            getInitialState: function(){
                return {editing: false}
            },
            edit: function(){
                this.setState({editing: true});
            },
            remove: function(){
                console.log("Removing comments");
            },
            save: function(){
                this.setState({editing: false});
            },
            renderNormal: function(){
                return(
                    <div className = "comment-container">
                        <div className = "comment-text">{this.props.children}</div>
                        <button onClick = {this.edit}>Edit</button>
                        <button onClick = {this.remove}>Remove</button>
                    </div>
                );
            },
            renderForm: function(){
                return(
                    <div className = "comment-container">
                        <teaxtarea defaultValue = {this.props.children}></teaxtarea>
                        <button onClick = {this.save}>Save</button>
                    </div>
                );
            },
            render: function(){
                if (this.state.editing){
                    return this.renderForm();
                }else{
                    return this.renderNormal();
                }
            }
        });
        ReactDOM.render(
            <div className = "board">
                <Comment>Hey now</Comment>  
                <Comment>Hey Anja</Comment> 
                <Comment>Hey Olga</Comment> 
            </div>,
            document.getElementById("example"));
       </script>
    </body>
</html>

＆＃13;

Answer 2

我是一个n00b，但我在你的代码中发现了问题:-) Mayank的回答有帮助...你忘记通过在()和{{之后添加renderForm()来调用该函数1}}

但即使有了这个答案，textarea仍然没有出现。在弄乱逻辑10分钟后，我意识到这只是一个错字。你写了renderNormal()而不是<teaxtarea> ...修复了错字，以及Mayank的解决方案，它修复了你的应用： - ）

我在React.js状态方面遇到了一些问题

2 个答案: