0

検索コンポーネントで特定の計算を行いたい。これを行うには、Header コンポーネントで取得した buttonSearchRefOffsetLeftValue を Search コンポーネントに渡す必要があります。ヘッダーで目的の値を取得します。ただし、検索コンポーネントでは常に未定義になります。この振る舞いが理解できません。

const Header = props => {
     const buttonSearchRef = useRef(null);

     let buttonSearchRefOffsetLeftValue;

     useEffect(() => {
         buttonSearchRefOffsetLeftValue = 
         ReactDOM.findDOMNode(buttonSearchRef.current).offsetLeft;
         console.log(buttonSearchRefOffsetLeftValue); //got the value
      })

   return (
      <div ref={buttonSearchRef}>He<div>
             <Search buttonSearchRefOffsetLeftValue= 
          {buttonSearchRefOffsetLeftValue} />
       ) 
     }

 const Search = (props) => {
     console.log(props.buttonSearchRefOffsetLeftValue)//got undefined WHY?
 }
4

2 に答える 2

2

その理由は、最初にこのように宣言すると、その値はデフォルトで未定義になるためです

 let buttonSearchRefOffsetLeftValue;

次に、 ofが実行される前に、まずこの値をSearchコンポーネントに渡します。それがあなたが得る理由です。その後、DOM が完全にレンダリングされると、ref がアタッチされ、useEffect が実行されて update が実行されますが、これはReact の状態または小道具ではありません。したがって、 では更新されず、未定義のままになります。useEffectHeaderundefinedbuttonSearchRefOffsetLeftValueprops.buttonSearchRefOffsetLeftValueSearch

これに対する簡単な修正はbuttonSearchRefOffsetLeftValue、状態にすることです

export const Header = (props) => {
  const buttonSearchRef = useRef(null);

  const [ buttonSearchRefOffsetLeftValue, setButtonSearchRefOffsetLeftValue] = useState(null);

  useEffect(() => {
      setButtonSearchRefOffsetLeftValue(ReactDOM.findDOMNode(buttonSearchRef.current).offsetLeft);
      console.log('head', buttonSearchRefOffsetLeftValue); //got the value
  });

  return (<div>
    <div ref={buttonSearchRef}>He</div>
    <Search buttonSearchRefOffsetLeftValue={buttonSearchRefOffsetLeftValue}/></div>);
  }

これで、Searchコンポーネントはコンソールに 2 回ログを記録し、2 回目は値を出力する必要があります。

于 2020-10-13T17:28:06.840 に答える