7.模板渲染语法及props向下传递参数

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.渲染数据
​ 1.1.给当前组件的state添加数据 src/App.js

    constructor(props) {
        super(props);//必须继承父类所有内容
        this.state={
            title:"待办事项",
            desc:"今日事，今日毕。",
            todos:[                     #insert开始
                {
                    id:1,
                    title:"吃饭",
                    isCompleted:true
                },{
                    id:2,
                    title:"睡觉",
                    isCompleted:false
                }
            ]                           #insert结束
        }
    }

​ 1.2.在jsx中渲染数据 src/App.js

render() {
        return (
            <Fragment>
                    #insert 开始
                {
                    this.state.todos.map(item=>{
                        return <div key={item.id}>{item.title}</div>
                    })
                }
                    #insert 结束
                <TodoHeader desc={this.state.desc}>{this.state.title}</TodoHeader>
                <TodoInput btnText='ADD'/>
                <TodoList/>
            </Fragment>
        );
    }

​ 1.3.渲染html数据 src/App.js

const _html="<div>你好<i>管理员</i></div>"

{
  <div dangerouslySetInnerHTML={{__html:_html}}></div>
}

​ 1.4.向下传props数据 src/App.js

需要先把1.2及1.3中的示例代码删除-在此不做代码提示

render() {
        return (
            <Fragment>
                <TodoHeader desc={this.state.desc}>{this.state.title}</TodoHeader>
                <TodoInput btnText='ADD'/>
                <TodoList todos={this.state.todos}/>  #update
            </Fragment>
        );
    }

​ 1.5.接收props参数并进行遍历数据，继续向下传递 src/components/TodoList/index.js
​ 1.5.1.第一种方式

render() {
        console.log(this.props)
        return (
            <ul>
                    #insert 开始
                {
                    this.props.todos.map(item=>{
                        return (
                            <TodoItem
                                key={item.id}
                                id={item.id}
                                title={item.title}
                                isCompleted={item.isCompleted}
                            />
                        )
                    })
                }
                    #insert 结束
                {/*<TodoItem/>*/} #delete 删除此行
            </ul>
        );
    }

​ 1.5.2.第二种方式 推荐

render() {
        console.log(this.props)
        return (
            <ul>
                {
                    this.props.todos.map(item=>{
                        return (
                            <TodoItem
                                key={item.id}
                                {...item} #insert 
                            />
                        )
                    })
                }
            </ul>
        );
    }