美文网首页
react_07组件化开发(二)

react_07组件化开发(二)

作者: 小话001 | 来源:发表于2021-07-20 14:21 被阅读0次

补充:

思考
打印结果
分析:
源码贴图
react这么操作应该是为了避免用户忘记传props,所以现在可传可不传。

子调用父函数通信:

  • 函数传递
    在父组件引用子组件的时候,之前传的都是单纯的单一属性:


    父传子的时候

    现在传递也是值,只不过后面是函数,不过要处理this指向问题
    1.直接传箭头函数调用(推荐)
    2.手动绑定this
    3.定义时候用箭头函数


    三种不同方式
    子组件直接解构出对应的变量就是函数,方法触发时候使用即可
    最后效果
//app.js
import React, { Component } from "react";
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter:10
    };
  }
  render() {
    return (
      <div>
        <h2>App组件</h2>
         <h3>{this.state.counter}</h3>
        <hr />
        {/* <Childtest name="方式一" age={18}  addNum={e=>this.add()}  /> */}
        {/* <Childtest name="方式二" age={18}  addNum={this.add.bind(this)}  /> */}
        <Childtest name="方式三" age={18}  addNum={this.increament}  />
        <hr />
      </div>
    );
  }
  add(){
    this.setState(
      {
        counter:this.state.counter+1,
      }
    )
  }
  increament=()=>{
    this.setState(
      {
        counter:this.state.counter+1,
      }
    )
  }
}
class Childtest extends Component {
  render() {
    const {addNum}=this.props;
    return (
      <div>
         <h2>子组件</h2>
         <button onClick={addNum}>+1</button>
      </div>
    );
  }
}

案例:

效果预览
  • 里面用到父传子、子传父的相互传值
  • 如果不变化的数据可以单独提出,不用全部放在state里面
  • 单独设置的样式文件style.css需要在index.js入口文件引用一下
//app.js
import React, { Component } from "react";
export default class App extends Component {
  constructor() {
    super();
    this.tabs=["流行", "新款", "精选"];//如果不变的东西一般放在这,不用全部放在state里面
    this.state = {
      counter: 10,
      tabIndex:0
    };
  }
  render() {
    return (
      <div>
        <Childtest tabs={this.tabs} Index={(ChildValue)=>this.getIndex(ChildValue)} />
        <div>
            <h3>内容根据tab切换变化:</h3>
            <p>{this.tabs[this.state.tabIndex]}</p>
        </div>
      </div>
    );
  }
  getIndex(value){
    this.setState({
      tabIndex:value
    })
  }
}

class Childtest extends Component {
  constructor(){
    super()
    this.state={
      currentIndex:0
    }
  }
  render() {
    const { tabs,Index } = this.props;
    return (
      <div>
        <div className="tabbar">
          {tabs.map((item,index) => {
            return (
              <div key={item} className="tab-item">
                <span 
                  className={ this.state.currentIndex===index?"active":""}
                  onClick={e=>this.tabClick(index,Index)}>
                  {item}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  tabClick(index,fn){
    console.log(index);//0,1,2
    //同时把这个序号传给父组件,然后父组件根据index 显示对应的文字,fn在这解构也行,如果不传的话
    fn(index);
    this.setState({
      currentIndex:index
    })
  }
}
//style.css
body{
  margin: 0;
  padding: 0;
}
.tabbar{
  display: flex;
  height: 44px;
  line-height: 44px;
  justify-content: space-around;
}
.tab-item{
    flex: 1;
    text-align: center;
}
.tab-item span{
  padding: 5px 8px;
}
.tab-item span.active{
  border-bottom: 2px solid red;
  color: red;
}

相关文章

  • react_07组件化开发(二)

    补充: react这么操作应该是为了避免用户忘记传props,所以现在可传可不传。 子调用父函数通信: 函数传递在...

  • Android 组件化开发实践

    Android组件化开发实践(一):为什么要进行组件化开发?Android组件化开发实践(二):组件化架构设计An...

  • iOS组件化

    0.ios组件化/模块化1.iOS 组件化开发项目框架设计2.iOS 组件二进制化方案3.组件化4.Seemygo...

  • Android组件化和插件化开发

    Android组件化和插件化开发 什么是组件化和插件化? 组件化开发 就是将一个app分成多个模块,每个模块都是一...

  • 滚动栏的开发

    滚动栏的开发 1.组件化在开发之前2.组件化在开发之后 组件库开发流程将控件封装成pod库1.pod lib cr...

  • Android组件化和插件化开发

    Android组件化和插件化开发 什么是组件化和插件化? 组件化开发就是将一个app分成多个模块,每个模块都是一个...

  • Vue组件化开发

    ✍目录总览:(组件化概念、组件注册、数据存放、组件数据共享、组件插槽、使用步骤) 一、组件化概念 1. 组件化开发...

  • Gradle实战——组件化的gradle build优化

    组件化gradle build优化 关于组件化,大家可以看我之前的文章,Android组件化开发实战[https:...

  • Android组件化开发实践笔记

    一、什么是组件化和插件化?   组件化开发就是将一个app分成多个模块,每个模块都是一个组件(Module),开发...

  • 浅谈Android插件化

    如今,插件化与组件化的开发越来越广泛的被我们所使用,尤其是许多大公司。 什么事插件化,什么是组件化呢?组件化开发:...

网友评论

      本文标题:react_07组件化开发(二)

      本文链接:https://www.haomeiwen.com/subject/peslmltx.html