class Parent extends Component {
constructor(props) {
super(props);
this.Child_A = React.createRef();
this.Child_B = React.createRef();
}
function_uses_Child_A = ()=> {
// This is working fine
this.Child_A.current.Child_A_Function()
}
function_uses_Child_B = ()=> {
// This is Does NOT work
// this.Child_A.current.Child_B_Function() is not a function
this.Child_A.current.Child_B_Function()
}
render() {
return (
<div>
<Child_A ref={this.Child_A}/>
<Child_B ref={this.Child_B}/>
</div>
);
}
}
export default Parent;
上記のコードは、両方に同じコードがあるが、一方が機能し、もう一方が機能しないという私の問題を示しています
これは子 A コンポーネントです。
class Child_A extends Component {
Child_A_Function = () => "Working";
render = () => <h1>Child_A</h1>
}
export default Child_A;
これは子 B コンポーネントです。
import {Form} from "antd";
class Child_B extends Component {
Child_B_Function = () => "Not Working";
render = () => <h1>Child_B</h1>
}
export default Form.create()(Child_B);
デバッグしてみたthis.Child_B.current
イメージのデバッグ情報
Form.create() データが表示されていると思いますが、Child_A が正常に動作し、Form.create() がないことだけが異なるため、これを理解しています。