记录一下前端框架React父子孙组件，孙级调用父级方法

这个月公司新项目前端用的React，公司所有员工都没用过属于全部学习阶段，踩了不少坑，本人摸索的父子孙级组件记录一下

需求：一个页面，一个class组件（父）包着函数组件（子）又包着一个函数组件（孙）

网上搜了一大堆方法几乎都是把父子孙弄成class组件，因为能用里面的生命周期，这样的话我们已经画好的页面改动太大了，几乎搜遍全网终于找到一个父子函数组件调用，拿来参考改了改一试成功了

父

export default class VoidShipInfo extends React.Component {constructor(props) {super(props);this.saveShip = this.saveShip.bind(this);}saveShip() {//这里是我的需求逻辑，不用参考this.state.shipListTemp.push(this.state.shipList[0])this.setState({shipListTemp: this.state.shipListTemp}, () => {this.cancelSaveShip();})}render() {const panes = [{title: '作业详情',content: <VoidBasicInfo saveShip={this.saveShip}/>,key: '1'}]let isLoading = this.state.isLoading;if (isLoading) {return (<div><Form onSubmit={this.handleSubmit} layout="vertical"{...layout}labelAlign="left"validateMessages={validateMessages}><Row><Col span={5} offset={4} className={styles.titleText}style={
   {marginTop: "1%", display: 'flex'}}><div className={styles.blockTitle}></div></Col></Row><Row><Col span={21}><Tabs activeKey={this.state.activeKey} className={styles.myTab} type="card" style={
   {marginLeft: "19%", marginTop: "1%"}} onChange={this.onTabChange}>{panes.map((panel) => {return <TabPane tab={panel.title} key={panel.key}>{panel.content}</TabPane>})}</Tabs></Col></Row></Form></div>)} else {return <div style={
   { color: 'white' }}>未查到数据,请刷新页面</div>}}
}

子

const VoidBasicInfo = (props) => {const {saveShip} = props;return (<Card style={
   {marginTop: "-2%"}} className={styles.tabContent}>.......略<Row><Col span={19} offset={3}>{shipList.map((index) => {return <VoidShip saveShip={saveShip} key={index}></VoidShip>})}</Col></Row>.......略</Card>)
}

孙

const VoidShip = (props) => {return (<div className={style.tabContent} style={
   {marginTop: "30px"}}>........略<Row style={
   {marginTop: '20px'}}><Col span={12}><button onClick={() => props.saveShip()} className={styles.addButton} className={style.saveBtn} style={
   {marginLeft: '54%'}}>保存</button></Col></Row></div>)
}