javascript - React 将子类方法传递给父功能组件
问题描述
我正在尝试从中获取adaptValue
并Component1
使用它Component2
。由于某种原因,这不起作用,因为 myadaptValue
始终为空/未定义。是因为Parent
是功能组件吗?
const Parent = (props) => {
const [adaptValue, setAdapt] = useState(null);
return (
<div>
<Component1 setAdapt={setAdapt}/>
<Component2 adaptValue={adaptValue}/>
</div>
)
}
export default class Component1 extends Component {
constructor(props) {
super(props);
}
adaptValue = (value) =>{
DO_SOMETHING_WITH_VALUE
}
componentDidMount() {
this.props.setAdapt(this.adaptValue);
}
render() {
return something;
}
}
export default class Component2 extends Component {
constructor(props) {
super(props);
}
someFunction = (value) =>{
...
//adaptValue is always undefined
this.props.adaptValue(value)
...
}
render() {
return something;
}
}
更新最终使父级组件成为类组件并且一切正常。想知道这是否是功能组件或基于类的组件之间的兼容性问题。
解决方案
当传递setAdapt
给Component1
...setAdapt
已经是一个函数。无需将其包裹在另一个中。Component1
将修改该值,并Component2
显示它。功能组件与行为无关。
尝试 ...
应用程序.js
import React, { useState } from "react";
import "./styles.css";
import Component1 from "./Component1";
import Component2 from "./Component2";
export default function App() {
const [adaptValue, setAdapt] = useState(null);
return (
<div>
<Component1 setAdapt={setAdapt} />
<Component2 adaptValue={adaptValue} />
</div>
);
}
组件1.js
import React, { Component } from "react";
export default class Component1 extends Component {
handleClick = () => {
this.props.setAdapt("New Value");
};
render() {
return <button onClick={() => this.handleClick()}>Set Value</button>;
}
}
组件2.js
import React, { Component } from "react";
export default class Component2 extends Component {
render() {
return !!this.props.adaptValue ? (
<h1>{`"${this.props.adaptValue}" <- Value of adaptValue`}</h1>
) : (
<h1>adaptValue Not Assigned</h1>
);
}
}
推荐阅读
- java - 当我运行此代码时,它给了我一个白屏,这个白屏的原因是 try 块中的第一行
- linux - 如何从 popen 和 fgets 获得无缓冲的输出
- python - 在 Airflow 中使用 Spark
- javascript - 未选中时,默认情况下复选框“打开”?
- java - 创建自定义字段注释以检查 Java 中的 Null 值
- flutter - Flutter:连接小部件包装器提供程序错误
- google-sheets - G-Sheets 计数单元格并在 0 上显示空单元格
- c# - 两个对象的EF Core保存错误取决于第二个等于一个
- oracle - 如何将整行作为记录传递给oracle触发器中的函数
- linux - InfluxDB 拒绝连接