一、父传子
- 采用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事件,不然会报错。
- 如何使用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>
);
}
二、子传父
- 采用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