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>);}
}