react中的父子传值

 在app.js中,使用子组件tab.js,并进行以下的操作:

1. 点击按钮,变量的值进行递增或递减;

2.父子传值,实现点击tab栏,打印出对应的li 的效果;

App.js中

// import React from 'react'
//下面的class类的书写中可以省略 React
import { Component } from 'react'
import './App.css';
//在App中使用新建的tab.js文件
import Tab from './components/Tab'
//
//声明一个class类
class App extends Component {
  // 类的共有属性放到 constructor 里面**
  //**3.constructor 函数,可以接受传递过来的参数,同时返回实例对象**
  //使用super调用了父类中的构造函数 (super一定要写在私有属性的前面)
  constructor() {
    super()
    //在state中写 变量
    this.state = {
      a: 1,
      arr: ['商品', '列表', '评价', '我的'],
      // text: ''
    }
  }
  //
  //因为react是单向数据,页面要实现数据实时改变,
  //在constructor中写 state属性,里面放变量
  //
  //在改变值时,会出现this的指向问题,所以在更改变量的值时
  //修改this的三种方式
  //函数名.call(null,参数1,参数2)//以逗号隔开 传null指向window
  // 函数名.apply(null,[参数1,参数2])
  // 函数名.bind()
  //1.点击button(绑定事件之后this指向的就是触发事件的事件源)
  //在事件onClick中 this.fn.bind
  //2.将函数写为箭头函数,在该函数里面写更改变量的逻辑(函数或变量可以不带var)
  fn = () => {
    this.state.a++
    var b = this.state.a //声明一个变量进行接收,避免this出现指向问题
    //修改变量值
    this.setState({
      a: b
    })
  }
  // 子 中点击的 传递给 父 时,需要通过函数来传递
  //
  getLi(text) {
    console.log(text);
   //将 从 子中获取的数据 放进 变量中,并展示到页面上
    // console.log( this.state.text); //会报错
  }
  //渲染页面
  render() {
    //传递的数组,可以放在此处
    //
    return (
      <div className="App">
        {/* 使用子组件  */}
        {/* 值的使用,要用{}里放 */}
        <span>{this.state.a}</span>
        <button onClick={this.fn}>点击</button>
        {/* 向子组件传数组 */}
        {/* <p>{this.state.text}</p> */}
         {/* 父子传值 */}
        <Tab arr={this.state.arr} getLi={this.getLi} />
      </div>
    )
  }
}
export default App;

子组件 Tab.js

import { Component } from 'react'
import './Tab.css'
class Tab extends Component {
     //子 中点击的要传给 父,需要函数还进行传递
     clickLi(items){
        //调用父中 对应的函数
        this.props.getLi(items)
     }
    render() {
        // console.log(this.props.arr);  //接收传来的数组
        //使用map的方式 进行遍历,因为map方法存在返回值
        return (
           <ul>
             {
             this.props.arr.map((item,index)=>{
                 //点击事件,使用bind的方法,将this指向 点击li 的函数, 将li中点击的值,传给该函数
                 return <li key={index} onClick={this.clickLi.bind(this,item)}>{item}</li>
             })
             }
           </ul>
        )
    }
}

export default Tab