react基础学习（二）组件通信

本文链接： https://blog.csdn.net/marendu/article/details/100173270

react基础学习（二）组件通信

父传子

通过在父组件的标签中添加属性传递，
```
<List data={this.state.list}/>
```
子组件通过 props获取
```
this.props.data
```

子传父，通过事件传参

在父组件上定义一个方法。传递到子组件

Dellist =(id) =>{
        this.setState({
            Todolist: this.state.Todolist.filter(item =>item.id !==id)
        })
    }
<Todoitem 
        Dellist = {this.Dellist} 
       />
      </div>

子组件通过props获取到父组件上的方法在自己的方法中调用

handelClick = () =>{
    this.props.Dellist(this.props.id)
   }
<button className="button is-danger is-small" onClick={this.handelClick}>删除</button>

组件内部的数据state

// state是组件的内部状态
  state的第一种写法
state = {
  //   list: [1, 2, 3, 4, 5]
  // }
constructor() {
    super()
    // state的第二种写法, 但是得注意，这种写法必须在super()之后
    this.state = {
      list: [1, 2, 3, 4, 5]
    }
    console.log('constructor只会执行一次，所以推荐在这里来进行bind(this)')
        this.handleAddRandomThree = this.handleAddRandomThree.bind(this)
  }

/ react里更改state不能直接更改，这样更改的话，只有数据会变化，但是界面并不会根据数据的变化而变化
列// this.state.list.push(Math.random())
必须得用setState()方法
// setState有两个参数，第一个参数可以是一个对象

this.setState({
     
      list: this.state.list.concat(Math.random())
    })
  }
  
handleAddRandomTwo = () => {
    const list = [...this.state.list]
    list.push(Math.random())
    // 也可以是一个方法去return一个对象, 这样做的好处是，可以在这个方法里有一个参数，是上一次的state
    // 因为setState是异步的, 所以setState还有第二个参数，也是一个方法, 就是setState之后的回调函数
    this.setState((prevState) => {
      console.log('prevState:', prevState)
      return {
        list
      }
    }, () => {
      // 这里得到的 this.state才是最新的state
      console.log('回调里的this.state:', this.state)
    })
    console.warn('setState外面的this.state:', this.state)
  }

props类型验证(是从react中剥离出去的一个包，用于检查props的类型)

npm i prop-types -S

引入：import PropTypes from ‘prop-types’

使用方法，在子组中引入，在实例上添加

static propTypes= {
    todos:PropTypes.arrayOf(PropTypes.shape({
        id:PropTypes.number.isRequired,
        text:PropTypes.string.isRequired
    })).isRequired
}
}

DefaultProps 定义默认值当不传值时，以默认值为准

static defaulttProps = {
    addItem: ()=>{}
}

/ 函数式组件的defaultProps写法
const TodoHeader = (props) => {
  return (
    <div>
      <h1>{props.children}</h1>
      <p>{props.subtitle}</p>
    </div>
  )
}
// 使用箭头函数创建的组件，就要先定义一个组件，再使用下面的方式来创建默认的props
TodoHeader.defaultProps = {
  children: '待办事项列表',
  subtitle: '今日事，今日毕，不知有没有明天'
}
// 使用箭头函数创建的组件，就要先定义一个组件，再使用下面的方式来写propTypes
TodoHeader.propTypes = {
  subtitle: PropTypes.string
}
export default TodoHeader

  <Fragment> react中代表空标签用于包裹
        {/* 组件的子元素可以在组件内部通过props.children来获取 */}
        <TodoHeader>TODO LIST</TodoHeader>
        <TodoInput
        
        />
      </Fragment>

绑定事件并传递参数

第一种方法

1，使用箭头函数包裹一层去调用用一个函数此时不用bind this

//第一种方法，使用箭头函数
export default class App extends Comment{
  handleClick(id){
    console.log(this);
    console.log(id);
  }
  render(){
    return{
      <div>
        <button onClick={
          ()=>{
            this.handleClick(123)
          }
        }>点击</button>
      </div>
    }
  }
}

第二种方法

直接绑定事件，使用bind(this，params)

//第二种方法 使用bind（this， params)
export default class App extends Comment{
  handleClick(id){
    console.log(this);
    console.log(id);
  }
  render(){
    return{
      <div>
        <button onClick={
         this.handleClick.bind(this,123)
        }>点击</button>
      </div>
    }
  }
}

第三种方法作为子组件的方式（推荐使用)

//第三种方法 子组件的方式
class Button extends Component{
  handleClick=()=>{
    this.props.onClick(123)
  }
  render(){
    return(
      <button onClick={
        this.handleClick
       }>点击</button>
    )
  }
}



export default class App extends Component{
  handleClick(id){
    console.log(this);
    console.log(id);
  }
  render(){
    return{
      <div>
     <Button  onClick={
      this.handleClick
     }/>
    }
  }
}

react基础学习（二）组件通信

react基础学习（二）组件通信

猜你喜欢