父子组件之间的传值-react

1：父组件的值传给子组件

例如：下面是一个todolist的功能，能很好的说明父组件传给子组件，子组件如何调用，效果图如下：

代码如下：
父组件：

import React,{Component,Fragment} from 'react'
import ToDoItem from './ToDoItem'
// Fragment是占位符

class ToDoList extends Component{
  constructor(props){
    super(props)
    this.state = {
      inputValue:'',
      list:[]
    }
    this.changeInput = this.changeInput.bind(this)
    this.handelClickButn = this.handelClickButn.bind(this)
    this.handelDeleteListItem = this.handelDeleteListItem.bind(this)
  }
  render(){
    return (
      <Fragment>
          <div>
            <input value={this.state.inputValue}  onChange={this.changeInput}/>
            <button onClick={this.handelClickButn}>提交</button>
          </div>
          <div>
            {this.getToDoItem()}
          </div>
      </Fragment>
    )
  }
  // 子组件的结构
  getToDoItem(){
     // content、deleteItem、index都是子组件接受的值，这些名字你可以自定义
    return  this.state.list.map((item,index)=>{
      return (
        <ToDoItem 
          content={item} 
          key={index} 
          deleteItem={this.handelDeleteListItem} 
          index={index}
        />
      )
    })
  }
   // input框发生改变的时候，将改变的值赋值给inputValue
  changeInput(e){
    const value = e.target.value
    this.setState(()=>({
      inputValue:value
    }))
  }
  //点击提交，将列表中增加一条数据
  handelClickButn(){
    this.setState((prevState)=>({
      list:[...prevState.list,prevState.inputValue],
      inputValue:''
    }))
  }
   // 点击item将其删除
  handelDeleteListItem(index){
    // state里的值不能直接修改，只能通过setState修改
    this.setState((prevState)=>{
      const list = [...prevState.list];
      list.splice(index,1);
      return {list}
    })
  }
}
export default ToDoList

子组件：

import React,{Component} from 'react'
class ToDoItem extends Component{
  constructor(props){
    super(props)
    // 在constructor这么写，将this指向永远的指向ToDoItem，节约性能问题
    this.handeClickDeletClick = this.handeClickDeletClick.bind(this)
  }
  render(){
    const { content } = this.props
    return (
      <div onClick={this.handeClickDeletClick}>
        {content}
      </div>
    )
  }
  handeClickDeletClick(){
    // deleteItem 是调用父组件传过来的函数，index父组件传过来的值
    const {deleteItem,index} = this.props
    deleteItem(index)
  }
}
export default ToDoItem