美文网首页
7.模板渲染语法及props向下传递参数

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

作者: __疯子__ | 来源:发表于2020-05-20 15:12 被阅读0次

教程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>
        );
    }

相关文章

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

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

  • 2018-12-20 props和state

    1.概念 1)props是属性,可当作参数的传递,是从上层模块向下层模块进行的传递。 2)state是状况,可当作...

  • 3.2 django模板语法

    DTL模板语法 模板变量: 模板中可以包含变量,Django在渲染模板的时候,可以传递变量对应的值过去进行替换。变...

  • react--props

    props属性: props对于模块来说属性外来属性 传递参数: 模块中接受参数:this.props.username

  • React - 函数式组件化 & props参数传递

    React函数式组件化 & props参数传递 函数式组件 定义变量 & 使用组件 通过props传递参数 展开运...

  • React小记(一)

    1. Props传递时导致Pure组件重新渲染 若直接在render里面去声明参数来传递给子组件,那么当父组件触发...

  • django的模板语法1

    DTL模板语法 变量: 模板中可以包含变量,Django在渲染模板的时候,可以传递变量对应的值过去进行替换。变量的...

  • 最浅显易懂的Django系列教程(8)-模板变量

    DTL模板语法 变量: 模板中可以包含变量,Django在渲染模板的时候,可以传递变量对应的值过去进行替换。变量的...

  • React 入门实例教程

    目录 html模板 ReactDOM.render() JSX 语法 组件 & props props & 纯函数...

  • react 基本语法

    目录 html模板 ReactDOM.render() JSX 语法 组件 & props props & 纯函数...

网友评论

      本文标题:7.模板渲染语法及props向下传递参数

      本文链接:https://www.haomeiwen.com/subject/pjxnohtx.html