Ref.Current 未定义

Posted 2023-04-14

【中文标题】Ref.Current 未定义

【英文标题】：Ref.Current is Undefined

【发布时间】：2020-03-07 16:28:03

【问题描述】：

TLDR - 我需要帮助弄清楚如何使用 refs 更改子组件的颜色。

我试图通过做一个简单的例子来教自己更多关于 React refs 的知识：将子组件中的背景颜色变化与 props 和 refs 进行比较。 我意识到这不是最佳实践然而，在野外，以玩具为例，这似乎是一个很好的孤立练习。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SubComponent1 from './SubComponent1'
import SubComponent2 from './SubComponent2'

class App extends React.Component 

  render() 
    let myRef = React.createRef();

    return (
        <div className="App">
          <header className="App-header">
            <SubComponent1
                  message = "Passing via props"
                  color = "orange"
              />
              <SubComponent2
                  message = "Passing via ref" 
                  ref=myRef
              />
              console.log("hi")
              console.log(myRef)
            console.log(myRef.current)
            /*myRef.current.style =  backgroundColor: 'green' */
          </header>
        </div>
    );
  


export default App;

我希望能够在我的 App.js 文件中调用 myRef.current.style = backgroundColor: 'green' （或类似的东西），但是，当我尝试调用它。

当我控制台日志时，我得到 current : null，但在展开时，组件数据就在那里。我读到这可能是因为 myRef.current 在 compomentDidMount 之后被擦除，但我不确定从这里去哪里。

如果我想继续完成这个示例，对我来说最好的方法是什么？理想情况下，我想我希望能够调用我已注释掉的行或类似的东西。

代码 - https://github.com/ericadohring/ReactRef

【问题讨论】：

将您的 createRef 函数移到渲染之外，因为每次渲染都会清除并填充它。 pl.reactjs.org/docs/refs-and-the-dom.html

【参考方案1】：

你必须在组件中定义 ref 变量，而不是在渲染函数下。

component ... 
     myRef = React.createRef();
...
render() 
...
...