javascript - 通过在 React 中使用 useRef 钩子(Hook)获取另一个组件的宽度来调整一个组件的大小

Question

我正在尝试使用 React 中的 useRef Hook 来设置组件的宽度，但我显然不是在摸索这个模式。 codesandbox 可以在这里找到:https://codesandbox.io/s/vqn5jyv9y5 .谢谢!

import React, {useRef} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Foo />
    </div>
  );
}

const Foo = () => {
  const { current: btn } = useRef(null);
  return (
    <React.Fragment>
      <button ref={btn}>buuuuttttoooon</button>
      <div style={{ width: btn.style.width, backgroundColor: 'pink', height: '50px' }} />
    </React.Fragment>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

btn 以 null 的形式出现，这会引起麻烦，而且 ref 会选择您在组件级别定义的样式。如果我理解正确，那么您要在第一个 HTML 元素的基础上修改另一个 HTML 元素的样式。

请找到我使用state修改的代码-

const Foo = () => {
  const [count, setCount] = React.useState('100px')
  const refElem = React.useRef(0)
  return (
    <>
      <button 
        ref={refElem => {
            if(refElem) {
              setCount(refElem.style.width)
            }
          }
        }
        style={{
          width: '700px'
        }}>This is a button 1</button>
      <hr />
      <button style={{width: count}}>This is a button 2 = {count}</button>
      <hr />
    </>
  )
}

工作示例 - https://codepen.io/swapnesh/pen/ywPRWG