Question

我想问你一些关于React.js的问题。现在我正在做一些React.js练习，似乎我犯了一些错误。它应该是保存，删除和编辑按钮，textarea。单击编辑按钮时，将显示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(){
                var val = this.refs.newText.value;
                console.log (val);
                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">
                        <textarea ref ="newText" defaultValue = {this.props.children}></textarea>
                        <button onClick = {this.save}>Save</button>
                    </div>
                );
            },
            render: function(){
                if (this.state.editing){
                    return this.renderForm();
                }else{
                    return this.renderNormal();
                }
            }
        });

        var Board = React.createClass({
            getInitialScale: function(){
                return (
                    comments: ["Ira", "Nata", "Nina"]
                )
            }, 
            render: function(){
                return (
                    <div className = "board">{
                        this.state.comments.map(function(text, i){
                            return (<Comment key = {i}>{text}</Comment>);
                        }) 
                    }
                    </div>                      
                );
            }
        });

        ReactDOM.render(<Board />, document.getElementById("example"));
    </script>

</body>
</html>

我做错了什么？最好的问候

Answer 1

你试图在普通的js中使用JSX，而不使用变换器，因此是一个空白屏幕（控制台中也会出现一些错误）。

JSX只是在javascript中使用html标签和结构的一个奇特的词（例如：参见你的渲染函数）。

早些时候，有一种方法可以在浏览器中编译JSX，但这似乎已被弃用（https://facebook.github.io/react/jsx-compiler.html）。您可以使用此处提供的其他链接进行在线复制。

更好的选择是设置节点并使用create-react-app（详情请参阅：https://github.com/facebookincubator/create-react-app）。这样，您就可以使用各种各样的库和实用程序。

PS：如有疑问，请检查chrome开发人员工具（右键单击屏幕＆gt;检查元素）。

Answer 2

您的代码中有一些拼写错误。如果您打开chrome开发人员工具，您将看到它。我更正了您的代码如下：

1）getInitialScale - ＆gt; getInitialState

2）getInitialState中的返回值必须是对象

    getInitialState: function(){
        return {comments: ["Ira", "Nata", "Nina"]}
    },

＆＃13;

    <html>
    <head>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/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(){
                var val = this.refs.newText.value;
                console.log (val);
                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">
                            <textarea ref ="newText" defaultValue = {this.props.children}></textarea>
                            <button onClick = {this.save}>Save</button>
                        </div>
                );
            },
            render: function(){
                if (this.state.editing){
                    return this.renderForm();
                }else{
                    return this.renderNormal();
                }
            }
        });
    
        var Board = React.createClass({
            getInitialState: function(){
                return{
                    comments: ["Ira", "Nata", "Nina"]
                }
            },
            render: function(){
                return (
                        <div className = "board">{
                            this.state.comments.map(function(text, i){
                                return (<Comment key = {i}>{text}</Comment>);
                            })
                        }
                        </div>
                );
            }
        });
    
        ReactDOM.render(<Board />, document.getElementById("example"));
    </script>
    
    </body>
    </html>

＆＃13;

此外，您应该为chrome安装React Developer Tools，这对调试和检查状态（道具）值非常有帮助。

Answer 3

将代码与DOM分开始终是一个好习惯。所以你可以创建一个文件＆＃34; abc.js＆＃34;并复制这个。我已将您的代码转换为React格式，现在正在运行。

import React from 'react'
import ReactDOM from 'react-dom'

class Comment extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        editing : false,
        textValue: this.props.textValue
      }
      this.edit = this.edit.bind(this)
      this.remove = this.remove.bind(this)
      this.save = this.save.bind(this)
    }
    edit(){
      this.setState({editing: true});
    }
    remove(){
      console.log("Removing comments");
    }
    save(){
        var val = this.refs.newText.value;
        console.log (val);
        this.setState({editing: false, textValue : val});
    }
    renderNormal(){
        return(
            <div className = "comment-container">
                <div className = "comment-text">{this.state.textValue}</div>
                <button onClick = {this.edit}>Edit</button>
                <button onClick = {this.remove}>Remove</button>
            </div>
        );
    }
    renderForm(){
        return(
            <div>
                <textarea ref ="newText" ></textarea>
                <button onClick = {this.save}>Save</button>
            </div>
        );
    }
    render(){
        if (this.state.editing){
            return this.renderForm();
        }else{
            return this.renderNormal();
        }
    }
  }

    class Board extends React.Component{
        constructor(props){
          super(props)
          this.state = {
            comments : ["Ira", "Nata", "Nina"]
          }
        }

        render(){
            const myComp = this.state.comments.map((a) =>{
              return (
                <Comment textValue={a}/>
              )
            })
            return (
                    <div>
                    {myComp}
                    </div>
            )
        }
    }

        ReactDOM.render(<Board />, document.getElementById('root'));

React js：多个子注释

3 个答案: