無法使用 forwardRef 設置組件樣式

Question

我對反應還很陌生，所以我仍然了解組件的生命周期。 但這個問題讓我摸不着頭腦。

例如，我不明白為什么要添加“setState(10);” 導致“測試”組件的樣式恢復為默認值，但<div ref={ref2}>Hi</div>保持其樣式。 （見下圖）

我知道“setState(10);” 會導致重新渲染，但為什么要恢復“測試”組件的樣式？

另外，請忽略調用 setState(10) 的“實際使用”——我知道它毫無意義，因為它從未被使用過，而且我知道使用“state”作為 UseEffect 依賴項可以解決這個問題。 但我遇到的主要問題是理解為什么組件的樣式會恢復為默認值。

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const [state, setState] = useState();
  let ref1 = useRef();
  let ref2 = useRef();
  useEffect(() => {
    console.log("useEffect called ", ref1.current);
    ref1.current.style.backgroundColor = "red";
    ref2.current.style.backgroundColor = "green";
    setState(10);
   // }, [state]);
  }, []);

  const Test = React.forwardRef((props, ref1) => {
    console.log("test called - rendering webpage", ref1.current);
    return (
      <div ref={ref1} {...props}>
        HI from Test{" "}
      </div>
    );
  });

  return (
    <div className="App">
      <Test ref={ref1} />
      <div ref={ref2}>Hi</div>
    </div>
  );
}

控制台 output

test called - rendering webpage undefined
useEffect called <div style="background-color: red;">HI </div>
test called - rendering webpage <div style="background-color: red;">HI </div>

Answer 1

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const [state, setState] = useState();
  let ref1 = useRef();
  let ref2 = useRef();
  useEffect(() => {
    console.log("useEffect called ", ref1.current);
    ref1.current.style.backgroundColor = "red";
    ref2.current.style.backgroundColor = "green";
    setState(10);
    // }, [ref.current]);
  }, [state]);

  const Test = React.forwardRef((props, ref1) => {
    console.log("test called - rendering webpage", ref1.current);
    return (
      <div ref={ref1} {...props}>
        HI from Test{" "}
      </div>
    );
  });

  return (
    <div className="App">
      <Test ref={ref1} />
      <div ref={ref2}>Hi</div>
    </div>
  );
}

發生這種情況的原因是一旦您更新 state 整個組件就會重新呈現。 您的 useEffect 將僅在 componentDidMount 上運行一次，因此您獲得的新參考不會更新。 要擺脫這種情況，您應該使用 state 作為 useEffect 的依賴項。

Answer 2

樣式消失的原因是您已經在App組件中定義了Test組件。 這意味着每次App呈現時，您都將定義一個名為Test的新組件類型。 該組件的文本與前一個組件相同，但就 React 而言它是一種新類型，因此 React 被迫卸載舊組件並安裝新組件。 這會清除您對舊版本所做的任何更改。

所以至少，您需要將Test移到App之外。 這樣，組件只定義一次，不會在每次渲染時重新掛載

export default App() {
  // ...
}

const Test = React.forwardRef((props, ref1) => {
  // ...
})

上面應該修復重置並讓您嘗試使用 refs，但我強烈建議您不要使用 refs 來設置元素的樣式。 Refs 是有時需要的逃生艙口，但為組件設置樣式的標准方法是通過 style 道具。 如果你需要改變風格，那么你可以有一個 state 變量，讓它控制風格道具。

如果您手動使用 javascript 設置ref1.current.style.backgroundColor ，react 無法知道您這樣做了，因此無法將這些更改考慮在內。 在某些情況下，React 可能最終會覆蓋您的更改，或者可能會跳過它沒有意識到需要做的更改。

export default function App () {
   const [colored, setColored] = useState(false);
   useEffect(() => {
     setColored(true);
   }, [])

   return (
    <div className="App">
      <Test style={colored ? { backgroundColor: "green" } : undefined} />
      <div style={colored ? { backgroundColor: "red" } : undefined}>Hi</div>
    </div>
  );
}

// Don't really need forwardRef anymore, but i left it in
const Test = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} {...props}>
      HI from Test
    </div>
  );
});