反应：当调用“componentDidMount”时，this.reference.current 为空 [重复]

Posted 2023-02-21

【中文标题】反应：当调用“componentDidMount”时，this.reference.current 为空 [重复]

【英文标题】：React: this.reference.current is null when "componentDidMount" is called [duplicate]

【发布时间】：2019-06-25 08:09:02

【问题描述】：

我正在尝试访问 this.myref.current，但在调用 componentDidMount 时无法访问。当所有引用都链接时，我可以调用另一个函数吗？

请注意，问题不仅仅是我无法访问 .current，更具体地说，我无法在 componentDidMount 期间访问它。我可以稍后在其他活动中访问它。

export default class Parentextends Component 
    constructor(props) 
        super(props);
        this.myref = React.createRef();
    

    componentDidMount() 
        this.myref.current.childmethodname(); // this.myref.current is null
    

    MyFn = () => 
        this.myref.current.childmethodname(); // This works
    

    render() 
        return (<Child ref=this.myref />);
    

【问题讨论】：

Child 是什么组件？来自文档：“您不能在函数组件上使用 ref 属性，因为它们没有实例。” reactjs.org/docs/…

这是一门课。在调用 componentdidmount 后访问 ref 可以正常工作。

@Chase 不，不是，它专门在 componentDidMount 上，在引用正确链接之前。

@KarimAbdelHamid 如该问题的答案所述，您应该找到另一种方法来解决您正在尝试做的事情。不应以这种方式使用引用，React 文档明确说明了这一点。

我不这样做的原因，@Chase，是因为子项包含一个文本框，并且在该子项中处理更改和提交功能。父级仅在父事件上更新文本框，但默认情况下也会更新。我不想将功能分散到任何地方并使其复杂化。

【参考方案1】：

正如 Felix 在评论中所说，在我看来，子组件是一个无状态（功能性）组件，正如您在 this CodeSandbox 中看到的那样，使用有状态（类）组件时一切正常。

【讨论】：

不，不是，它是一个类组件。正如我告诉他的，在调用 componentdidmount 后访问 ref 可以正常工作。