ReactV18组件之间传值

一、父传子

1. 采用class定义组件
   父组件方法

import React from "react";
class Main extends React.Component<any, any>{
	render() {
      return (
			<div>
              <TabsView content="我来自父组件，要去TabsView子组件"/>
            </div>
      );
  }
}
export default Main

子组件：
React.Component<any, any> 需要使用 React.Component 类的泛型作为 React.Component<PropsObject, StateObject>，不然直接使用this.props.content会报Property ‘xxx’ does not exist on type ‘Readonly<{}>’.ts(2339)错误。

class TabsView extends React.Component<any, any> {
  onChange(key:any, value:any) {
    this.forceUpdate();
  }
  render() {
    return (
      <div>
        <input value={ this.props.content} onChange={this.onChange.bind(this, '')}/>
      </div>
    )
  }
}

子组件使用了Input，需要onChange事件，不然会报错。

2. 如何使用React.FC组件形式，参数需要显示的传递下去
   父组件代码使用class定义

class Main extends React.Component<any, any>{
  constructor(props: any){
    super(props)
    this.state = {
        collapsed: false
    }
  render() {
      return (
	     <div ><MenuView props={this.state}/></div>
	  )
  }
}

子组件需要定义参数，直接使用props参数，如：props.collapsed，具体如下：

const MenuView: React.FC<{ props?: any, ref?: any }> = ({ props, ref }):any => {
	return (
    <div style={{ width: 256 }}>
      <Menu
        openKeys={openKeys}
        onOpenChange={onOpenChange}
        mode="inline"
        theme="light"
        inlineCollapsed={props.collapsed}
        items={items}
      />
    </div>
  );
}

二、子传父

1. 采用class定义组件。
   父组件代码：

import React from "react";
class Main extends React.Component<any, any>{
  constructor(props: any){
    super(props)
    this.state = {
        name:'李四'
    }
  getData=()=>{
    console.log(this.state.name);
    alert(this.state.name)
  }
  // 在父组件写入,param就是取子组件的一个值
  onRef = (param: any) => {
    // 然后用控制台输出一下param
    console.log(param);
    this.setState({ name: param})
  };
	render() {
      return (
			<div>
              <TabsView content="我来自父组件，要去TabsView子组件" onRef={ this.onRef } />
              <button onClick={this.getData} >父按钮获取子组件值 </button>
            </div>
      );
  }
}
export default Main

子组件代码，重点componentDidMount的数据处理：

class TabsView extends React.Component<any, any> {
  constructor(props:any) {
    super(props);
    this.state = {
      msg: '子组件向父组件传递数据'
    }
  }
  onChange(key:any, value:any) {
    this.forceUpdate();
  }
   // 将this挂到onRef中,用于父组件访问state中的值
  componentDidMount() {
    this.props.onRef&& this.props.onRef(this.state.msg);
  }
  render() {
    return (
      <div>
        <input value={ this.props.content} onChange={this.onChange.bind(this, '')}/>
      </div>
    )
  }
}

多层次传值

参考官方文档：状态提升

参考：
https://www.cnblogs.com/crazycode2/p/10023493.html
https://juejin.cn/post/7036776658258362399