Question

我是新来的反应者。我阅读了文档并试图研究我的问题。我很好奇为什么我的页面一直保持空白并且只显示标题。

我在研究时注意到，每个班级的名字都是大写的，那是常见的noobie错误。我相信这只是家庭作业，我的教授是用es5完成的，我想尝试使用es6并获得更好的反应感。请给我反馈，将帮助我改善谢谢 --

       class ToDo extends React.Component {
           constructor(props) {
           super(props);
           this.state= {task:false};
       }
           edit(){
            this.setState({editing:true});
            alert("edit course");
        }
           remove(){
            alert("remove course");
            this.props.removeProperty(this.props.index);
        }
           saveTask(){
            this.setState({editing:false})
            alert("save task");
            // alert(this.refs.teacher.value);
            var mytask = {task:"XXX"};
            mytask.task = this.refs.task.value;
            this.props.editProperty(this.props.index, mytask);
           }
           render(){
               if(this.state.editing){ 
            return(
            <div>  
                   <span className="fixed">{this.props.task}</span><br/>
                   <input type="button" value="Save" onClick={this.saveTask} />
            </div>                  
               )
           }else{
               return(
               <div>
                   <span className="fixed">{this.props.task}</span><br/>
                   <button onClick={this.edit.bind(this)}>Edit Task</button><br/>
                   <button onClick={this.remove.bind(this)}>Remove Task</button><br/>
                   <button onClick={this.promote.bind(this)}>Promote Task</button><br/>
                   <button onClick={this.demote.bind(this)}>Demote Task</button><br/>
               </div>
               )}   
           }
       };//end of this class

       class MyList extends React.Component{
           constructor(props) {
               super(props);
               this.state=  {arraytasks: [
            {task: "Wake up"},
            {task: "Eat breakfast"},
            {task: "Go to class"}
               ]};

           this.remove_task = this.remove_task.bind(this);
           this.edit_task = this.edit_task.bind(this);
           this.promote = this.promote.bind(this);
           this.demote = this.demote.bind(this);
           this.eachtask = this.eachtask.bind(this);
           //remember to bind

           }
           edit_task(item,i){
               console.log("editing");
            var copytask= this.state.objtasks;
            copytask[i]=newInfo;
            this.setState({arraytasks: copytask});

           }
           remove_task(i){
               console.log("removing");
               var copytask= this.state.arraytasks;
               copytask.splice(i,1);
               this.setState({arraytasks: copytask});
           }
           promote(){

           }
           demote(){

           }
           eachtask(item,i){
               <div>
               <ToDo key={i} index={i} 
                       task= {item.task}
                       removeProperty={this.remove_task}
                       editProperty={this.edit_task}/>
               </div>
           }


           render(){
               return(
                   <div>
                       {this.state.arraytasks.map(this.eachtask)}
                   </div>
               )
           }
       };



    // call the render method  -- only one parent can be rendered -- so add surrounding div
    ReactDOM.render(<div><MyList/></div>, document.getElementById('divTarget'));


    </script>

Answer 1

在eachtask中，您不会返回任何内容：

...
eachtask(item, i) {
    return (
        <div>
            <ToDo key={i} index={i}
                task={item.task}
                removeProperty={this.remove_task}
                editProperty={this.edit_task} />
        </div>
    )
}
...

反应渲染为空

1 个答案: