react父子组件数据传递及相关操作

组件创建

坑1：组件名字的首字母记得大写

方式一：类组件（老版本的方式）
@Form.create()  //很关键，不加的话父子嵌套时会报找不到某些组件的错
class Child extends React.Component {
componentDidMount(){
this.props.onRef && this.props.onRef(this);
}

func(){
console.log("执行我,我被执行了")
}
render(){
    const { getFieldDecorator } = this.props.form;
        return(
        <div>
        
        </div>
        );
}
}
方式二，函数组件（渠道云版本为16.6，无状态，最新版本18有状态，react hooks ，18版本主使用这种方式）

function MyButton(test) {

  return (
  <div >
    <Button type="danger" onClick={()=>{console.log(test)}}  style={{ marginRight: 8,position: "absolute", top: "58.5%",left: "67.5%"}} >
              新增
            </Button>
  </div>
    
  );
  
}

调用时可直接嵌套

子组件使用父组件的状态的方法，一般有两种常用的：使用props通信和使用context通信

（子调父）使用props通信

直接上代码：

scala复制代码import React, { Component } from 'react';

class App extends Component {
    state = { color: 'red' }
    changeColor = color => {
        this.setState({ color: color })
    }
    render() {
        return (
            <div style={{ border: `8px solid ${this.state.color}`, padding: "5px", margin: '5px' }}>
                <h1>Wrapper</h1>
                <Header color={this.state.color}></Header>
                <Main changeColor={this.changeColor.bind(this)} color={this.state.color}></Main>
            </div>
        )
    }
}

class Header extends Component {
    render() {
        return (
            <div style={{ border: `8px solid ${this.props.color}`, padding: "5px", margin: '5px' }}>
                <h1>Header</h1>
                <Title color={this.props.color}></Title>
            </div>
        )
    }
}

class Title extends Component {
    render() {
        return (
            <div style={{ border: `8px solid ${this.props.color}`, padding: "5px", margin: '5px' }}>
                <h1>Title</h1>
            </div>
        )
    }
}

class Main extends Component {
    render() {
        return (
            <div style={{ border: `8px solid ${this.props.color}`, padding: "5px", margin: '5px' }}>
                <h1>Main</h1>
                <Content changeColor={this.props.changeColor} color={this.props.color}></Content>
            </div>
        )
    }
}

class Content extends Component {
    render() {
        return (
            <div style={{ border: `8px solid ${this.props.color}`, padding: "5px", margin: '5px' }}>
                <h1>Content</h1>
                <button onClick={()=>this.props.changeColor("blue")}>变蓝</button>
                <button onClick={()=>this.props.changeColor("green")}>变绿</button>
            </div>
        )
    }
}


export default App;

（父调子）使用props自定义onRef属性

• 优点：
  1、写法简单易懂
  2、假如子组件是嵌套了HOC，也可以指向真实子组件
• 缺点：
  1、需要自定义props属性

import React , { Component } from "react"
import { withRouter } from "react-router-dom"

// 使用装饰器给裹上一层高阶函数（装饰器需要安装对应的babel包，此处作为演示使用）
@Form.create()  //很关键，不加的话父子嵌套时会报找不到某些组件的错
class Child extends Component {
componentDidMount(){
this.props.onRef && this.props.onRef(this);
}
func(){
console.log("执行我")
}
render(){
return (<div>子组件</div>);
}
}

class Parent extends Component {
handleOnClick(){
this.Child.func();
}
render(){
return (<div>
<button onClick={this.handleOnClick}>click</button>
<Child onRef={ node => this.Child = node }></Child>
</div>);
}
}

原文地址：https://blog.csdn.net/weixin_44248903/article/details/142478840

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！