TLDR - 参照を使用してサブコンポーネントの色を変更する方法を理解するのに助けが必要です。
サブコンポーネントの背景色の変化を props と refs の両方と比較するという簡単な例を使って、React 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 が消去されるためかもしれませんが、ここからどこに行けばよいかわかりません。
この例を完成させたい場合、どうするのが最善の方法でしょうか? 理想的には、コメントアウトした行などを呼び出せるようにしたいなと思っています。