Question

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

image debug info

我相信它会显示Form.create（）数据并删除我的我理解这是因为Child_A可以正常工作，唯一的不同是它没有Form.create（）

Answer 1

这是因为Form.create()()是一个高阶函数，它返回另一个组件。

如此

const DecoratedChild_B = Form.create()(Child_B);

DecoratedChild_B可能还有其他包装，它变成这样：

<wrapper ref={this.Child_B}>
   <Child_B/>
</wrapper>

这就是为什么你得不到想要的东西。

要获取表格参考，您应该使用wrappedComponentRef

const EnhancedForm = createForm()(Form);
<EnhancedForm wrappedComponentRef={(inst) => this.formRef = inst} />
this.formRef // => The instance of Form

如果要自定义某些内容，则必须使用其他名称作为ref函数

ReactJS：TypeError：this.ref.current.method不是具有蚂蚁设计形式的函数

image debug info

1 个答案: