详解react组件之间的参数传递

简介: 基于react组件之间的参数传递

1、父组件向子组件传递参数

class Child extends Component {
    componentDidMount(){
      let name = this.props.default;
      console,log(name);
    }
    render(){
      const { default} = this.props;
      return (
        <Input />
      )
   }
}
AI 代码解读
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  state = {
    name: 'Bob'
  }
  render() {
    return (
      <div>
        <Child default={this.state.name} />
      </div>
    )
  }
}
AI 代码解读

2、子组件向父组件传递参数

class Child extends Component {
    state={
      name:'Bob'
    }
    componentDidMount(){
      this.props.toParent(this.state.name);
    }
    render(){
      return (
        <Input />
      )
   }
}
AI 代码解读
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
   state = {
    name:''
  }
  getChildInfo = (name)=>{
     this.setState({name:name});
   }
  render() {
    return (
      <div>
        <Child toParent={this.getChildInfo.bind(this)} />
      </div>
    )
  }
}
AI 代码解读
目录
打赏
0
0
0
0
42
分享
相关文章
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
456 0
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
97 0
|
9月前
|
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
96 0
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
94 0
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
80 0
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
160 0
React组件生命周期
React组件生命周期
140 1
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等