0
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() がないことだけが異なるため、これを理解しています。

4

1 に答える 1