参考电流未定义

Question

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

我想通过做一个简单的例子来学习一些关于React ref的知识：比较使用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'}（或具有这种效果的东西），但是，当我将myRef.current视为null时，尝试调用它。

当我控制台日志时，我得到{current：null}，但是在扩展时，组件数据就在那里。我读到这可能是因为在compomentDidMount之后myRef.current被擦除了，但是我不确定如何从这里删除。

如果我想完成此示例，那么对我来说最好的方法是什么？理想情况下，我认为我希望能够拨打我已注释掉的电话或类似电话。

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

Answer 1

您必须在component中定义ref变量，而不是在render函数下定义。

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