教程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>
);
}
网友评论