react 父子传值_react父子组件传值

父组件向子组件传值

本示例使用todolist做演示

1.父组件

import React, { Component, Fragment } from 'react'

// 引入子组件

import TodoItem from './TodoItem'

class TodoList extends Component {

constructor(props) {

super(props)

this.state = {

// 数组中的值

list: ['vue', 'angular', 'react']

}

}

render() {

return(

{

this.state.list.map((v, k) => {

return (

{/* 通过content={item} 将数据传给子组件 */}

)

})

}

)

}

export default TodoList

2.子组件

import React from 'react'

class TodoItem extends React.Component{

render() {

// this.props.content 接受父组件传递过来的信息

return

{ this.props.content }

}

}

export default TodoItem

子组件向父组件传递消息

1.父组件

通过点击list，删除对应的项

import React, { Component, Fragment } from 'react'

import TodoItem from './TodoItem'

class TodoList extends Component {

constructor(props) {

super(props)

this.state = {

// 数组中的值

list: ['vue', 'angular', 'react']

}

}

render() {

return(

{

this.state.list.map((v, k) => {

return (

{/* 通过content={item} 将数据传给子组件

通过deleteItme将父组件的方法传给子组件

将父组件的this，传递给子组件

*/}

)

})

}

)

}

// 删除事件

handleDelete(index) {

let list = [...this.state.list]

list.splice(index, 1)

//1. 不希望直接修改state里面的数据 故先拷贝出来

//2. splice 删除后返回的是被删除的项，并改变原数组

this.setState({

list: list

})

}

}

export default TodoList

2.子组件

import React from 'react'

class TodoItem extends React.Component{

render() {

// this.props.content 接受父组件传递过来的信息

return

{ this.props.content }

}

handleClick() {

// 调用父组件的方法 并把对应的索引传给父组件

this.props.deleteItme(this.props.index)

}

}

export default TodoItem