组件间的通信\数据的传递，通过属性content、的方式传递数据。父组件为TodoList，属性content传递。子组件为TodoItem，属性props接收数据

{this.props.xxx} 

父组件通过属性的形式向子组件传递参数，

子组件通过props接收父组件传递过来的参数。

xxx 为定义传递的参数名

定义传递的参数名 content

赋key={index} 排除没有key值警告

拆分，新建一个小组件

固定语法：

// 引入react

import React from 'react'

// 继承React.Component组件

class TodoItem extends React.Component {

  // 返回标签

  render() {

    <div>xxx xxx</div>

  }

}

// 别忘了导出组件

export default TodoItem;

使用自定义组件：

1、导入自定义组件

import TodoItem from './TodoItem';

2、声明并使用自定义组件

<TodoItem />

拆分TodoItem组件

import React from "react";

class TodoItem extends React.Component {
    render(){
        return (
            <div>{this.props.content}</div>
        )
    }
}

export default TodoItem;

React有父子组件的概念，TodoList为父组件，TodoItem为子组件，

    父组件通过属性给子组件传参

    ｜ <TodoItem content={item} />

    子组件通过props接收父组件参数

    ｜ <div>{this.props.content}</div>

父组件通过属性的形式向子组件传递参数

子组件通过props接收父组件传递过来的参数

父组件通过属性的形式向子组件传参

子组件通过props接收父组件传递过来的参数

子组件通过调用父组件传递过来的方法实现与父组件的通信

创建子组件

import {Component} from 'react'
class TodoItem extends Component{
      constructor(props){
          //优化
          this.itemDel = this.itemDel.bind(this)
      }
      itemDel(){
          this.props.itemDel()
          
          //const { itemDel } = this.props
          //itemDel()
      }
    
    render(){
        const { content } = this.props //结构赋值
        return(
          <div onClick={this.itemDel}>
            {content}
        </div>
      )
    }
}

export default TodoItem

父组件引入子组件

import {Component,Fragment} from 'react'
import TodoItem from './TodoItem'

itemDel(index){
    let list=[...this.state.list]
    list.splice(index,1)
    this.setState({list})
}

getTodoItems(){
    return(
        this.state.list.map((item,index) => {
            return (
                <TodoItem 
                    key={index} 
                    content={item} 
                    itemDel={this.itemDel.bind(this,index)}
                />
            )
        }
    )
}

render(){
    return(
        <Fragment>
            <div>
                <input className='input-style' value={this.state.inputVal} onChange={this.inputChange}/>
                <button style={{background:'blue',color:'#fff'}} onClick={this.butClick}>add</button>
            </div> 
            <ul>{this.getTodoItems()}</ul>
        </Fragment>
    )
}

注意这里注释里的内容.

另外属性名可以随意.

react父组件向子组件传参：

父组件通过属性把值传给子组件，子组件通过props接收值

父子组件传递参数的方式.

父组件与子组件

父组件通过属性方式传递值给子组件，

子组件通过this.props获取父组件的属性

父组件通过属性的方式向子组件传递参数，子组件通过props接收父组件传递过来的参数。

子组件不能擅自修改props里的值。

父子組件概念：父組件通過屬性的形式向子組件傳遞參數，子組件通過props的形式接受父組件傳過來的參數

子組件通過 props 的形式來接受到父組件傳遞過來的參數。

TodoItem接受你傳遞過來的 content 的內容

{this.props.content}

父組件透過屬性的形式向子組件傳遞參數

此例為：
以一個 content 參數的形式傳給 TodoItem

import React from 'react';
import ToDoIterm from './ToDoIterm';

//React避免 Dom 操作，主要是面向数据操作;
  class ToDoList extends React.Component{

      //state存放数据的地方；
      constructor(props){
          super(props);
          this.state = {
             list:[],
             inputValue:''
          }

      }

      //修改state用setState；
      handleBtnClick(){
          this.setState({
              list:[
                  ...this.state.list,//...:数组展开符；
                  this.state.inputValue
              ],
              inputValue:''//为了让点击后input值清空；
          });
      }

      //监听input值变化；
      handleBtnChange(e){
          this.setState(
              {
                  inputValue:e.target.value //获取变化值；
              }
          );
      }

      //删除点击的列表项；
      handleItemDelet(index){

          //这一步相当于复制list（即副本）；在React中对state数据进项操作时，建议对副本操作，提高代码可调实性；
          const list = [...this.state.list];
          list.splice(index,1);
          this.setState({
              list    //list : list的简化，在es6中当key=value时可简化；
          })


      }
    render(){
      return (
          <div>
              <div>
                  <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                  <button onClick={this.handleBtnClick.bind(this)}>add</button>
              </div>
              <ul>
                  {this.state.list.map((iterm,index)=>{    //循环list；
                      return <ToDoIterm key={index} content={iterm}/>;//父组件以参数的形式向子组件传递参数；
                      //return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
                  })}
              </ul>
          </div>
      );
    }
}


export default ToDoList;

// 父组件通过属性的形式向子组件传递参数

// 子组件通过props接口父组件参数

父组件通过属性的形式给子组件传递参数

子组件通过props的形式接受父组件传递的参数

React 组件传值：

<ul>{

this.state.list.map((item，index)=>{

return <TodoItem content={item}/>

})

}</ul>

注释：item 传的值 

index ：值的位置

TodoItem ：组件名称

组件接收值：

先创建组件：

import React from 'react';

class TodoItem extemds React.Component{

render(){

 return(

<div>{}</div>

)

}

}

export default TodoItem;//导出组件

组件接收传过来的值时：

只需要更改接收方式：

<div>{this.props.content}</div>

记：父组件通过属性的形式给子组件传递参数

子组件通过this.props.(传过来的参数)来接收

react：

通过属性的形式从父组件向子组件传递参数

子组件通过props的形式接收父组件传递过来的参数

父组件通过属性的方式传递给子组件

子组件通过this.props.属性来接收

子组件和父组件之间的参数传递

父组件通过定义参数的形式传递，子组件通过props来接收

为什么循环产生的组件中要利用 key 这个特殊的 prop?

Keys 负责帮住 React 跟踪列表中哪些元素被改变，添加，删除。React 利用子元素的 key 再比较两棵树的时候，快速得知一个元素时新的还是刚刚被移除。没有 Keys ， React 也就不知道当前哪一个的 item 被移除了。

父组件通过属性的形式向子组件传递参数

子组件通过 props 接受父组件传递过来的参数

在此过程中 key 属性不可缺

react父子组件间参数的传递和引用

父组件通过属性的形式向子组件传递数据， 子组件通过props的形式接受父组件的数据。