Reactjs 参考电流未定义
TLDR-我需要帮助了解如何使用REF更改子组件颜色 我试图通过一个简单的例子来教自己更多关于React REF的知识:将子组件中的背景颜色变化与道具和REF进行比较。我意识到这不是野外的最佳实践,但是,对于玩具来说,这似乎是一个很好的单独练习Reactjs 参考电流未定义,reactjs,react-ref,Reactjs,React Ref,TLDR-我需要帮助了解如何使用REF更改子组件颜色 我试图通过一个简单的例子来教自己更多关于React REF的知识:将子组件中的背景颜色变化与道具和REF进行比较。我意识到这不是野外的最佳实践,但是,对于玩具来说,这似乎是一个很好的单独练习 import React from 'react'; import logo from './logo.svg'; import './App.css'; import SubComponent1 from './SubComponent1' impor
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;
从“React”导入React;
从“/logo.svg”导入徽标;
导入“/App.css”;
从“./SubComponent1”导入子组件1
从“./SubComponent2”导入子组件2
类应用程序扩展了React.Component{
render(){
让myRef=React.createRef();
返回(
{console.log(“hi”)}
{console.log(myRef)}
{console.log(myRef.current)}
{/*{myRef.current.style={backgroundColor:'green'}}/}
);
}
}
导出默认应用程序;
我希望能够在我的App.js文件中调用myRef.current.style={backgroundColor:'green'}(或类似的东西),但是,当我尝试调用它时,myRef.current似乎是空的
当我记录控制台日志时,我得到{current:null},但是在展开时,组件数据就在那里。我读到这篇文章可能是因为我的ref.current在ComponentDidMount之后被擦除了,但我真的不确定该从这里走到哪里
如果我想继续完成这个例子,那么对我来说最好的方式是什么?理想情况下,我想我希望能够拨打我评论过的电话或类似的电话
代码-您必须在组件中定义ref变量,而不是在render函数下
component ... {
myRef = React.createRef();
...
render() {
...
...
}
}
将createRef函数移到渲染外部,因为它将被清除并用每个渲染填充。