react 常用方法及父子 、兄弟传参等

第一条 父子传参（父传子）

 1.父传子

1.  父组件向子组件传参
    {...item} 表示把整个item参数对象都传过去了
    change 是传递方法

<ListItem key={item.id} {...item} change={this.change}/>


2.子组件接收参数

const {name, doStatus, id} = this.props

 

2.子传父及孙传父

父组件向子组件传递方法

<Lists change={this.change}/>

 change = (id, done) => {
       
 }
1.子组件直接把该方法向孙子组件传递
const {change} = this.props

<ListItem change={change}/>

2.孙子组件调用-传递值回去--这样父组件就可以接收到孙子组件接到的参数了
this.props.change(id,done)

 

 

第二条 对象修改{...toDoObject,b:3}

const toDoObject={a:1,b:2}

const newObject = {...toDoObject,b:3} // 此方法修改对象值

console.log(newObject)

打印结果  {a:1,b:3}

 

第三条 map的用法

 1.修改数组值

let newTodoList = this.state.todoList
newTodoList.map(item => {
    if (item.id === id) {
       item.doStatus = true
    } else {
       return item
    }
 })
 console.log(newTodoList)

第四条 react 样式修改（必须是双大括号）

<span style={{display: this.state.mouse ? 'block' : 'none'}}>删除</span>

 

第五条 安装限制条件

1.安装 

yarn add prop-types 或者 npm install prop-types

2.引入 （在需要引入的地方引入）

import proptypes from 'prop-types'

 

第六条 网页弹窗  -  返回值直接就是 true和false

window.comfirm('你确认删除么？')

 

第七条 声明方法的两种方式

方式一 高接参数

方法二 直接传参数

 

 

第八条 js 数组过滤器 filter

 

const newList = lists.filter((item) => {
    if (item.id !== id) {
        return item
    }
})

项目体验文件参照