12.拆分组件与组件之间的传值 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

父组件 TodoList

import TodoItem from './TodoItem' // 引入子组件

render() {
  return (
    <ul>
     {
       this.state.list.map((item, index) => {
         return (
           {/*父组件给子组件传值：通过属性的方式给子组件TodoItem传值*/}
           <TodoItem key={index} item={item} index={index} handleItemDelete={this.handleItemDelete}/>
         )
       })  
     }
    </ul>    
  )
}

handleItemDelete = (index) => {
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list
    })
}

子组件 TodoItem

import React, { Component } from 'react'

class TodoItem extends Component {
    render() {
        // 子组件中，可以通过 this.props.xxx使用父组件传递进来的值 
        return <li onClick={this.handleItemDelete} dangerouslySetInnerHTML={{__html: this.props.item}}></li>
    }

    handleItemDelete = () => {
        // 子组件向父组件传递值：子组件调用父组件传递进来的方法，并传递值。
        this.props.handleItemDelete(this.props.index)
    }
}

export default TodoItem

总结：父组件通过属性的方式向子组件传递数据。（父传子）

子组件中通过 this.props.xxx 接收父组件传递进来的数据（子接收）

子组件中修改父组件中的数据：通过调用父组件中的方法this.props.yyy。子组件不允许直接修改父组件传递进来的数据。

借助父组件中的方法来改变父组件中的数据。（子改父数据）

⚠️ **GitHub.com Fallback** ⚠️