-
es6的结构赋值:
const {content} = this.props
=》
使得可以直接使用`{content}`代替`{this.props.content}`
查看全部 -
一、新增样式的两种方式:
1、style行间样式 eg: style={{background:"green"}}
第一个花括号是js表达式;第二个花括号是对象
2、className
class与定义组件的时候冲突,所以不建议class,react中用className关键词.
二、解决render函数一个包裹标签的问题:
用<React.Fragment></React.Fragment>代替最外层的<div></div>标签
三、代码优化:
通过解构赋值引入React中的Component和Fragment;
import React, { Component,Fragment } from 'react';
替换后的写法:
class ToDoItemList extends Component{
......
}
render(){
return(
<Fragment>......</Fragment>
)
}
查看全部 -
<React.Fragment>
类似vue的<template>
查看全部 -
包引入,<Fragment>改为<React.Fragment>
查看全部 -
Fragment布局,<React.Fragment>替代<div>
查看全部 -
css行内样式:1、以{{background:'red',color:'#fff'}}对象形式进行编码
2、className形式,className = ‘red-btn’
查看全部 -
父组件,代码优化,.bind(this)优化,提高代码执行性能
查看全部 -
父组件向子组件传值,删除功能。父组件传递list下标、delete方法,子组件通过删除下标、delete方法来删除数据
查看全部 -
组件间的通信\数据的传递,通过属性content、的方式传递数据。父组件为TodoList,属性content传递。子组件为TodoItem,属性props接收数据
查看全部 -
this.setState({list})键和值一样可以这么写代码
查看全部 -
const list = [...this.state.list],拷贝副本list,操作list比直接操作this.state.list易于排错。根据list下标删除数据
查看全部 -
onChange()数据绑定
查看全部 -
map循环,li加上index下标为key
查看全部 -
组件的构造函数,组件创建时会自动的被执行。map函数,循环list。this指向。
查看全部 -
jsx语法:可以在语法里面写正常的标签(如:<div>)和js表达式(如:{1+2})
查看全部
举报