0

ボタンでスタイル付きコンポーネント div を作成する必要があります。ボタンは div のサイズを生成します。次に、div コンポーネント内にネストされたコンポーネントがサイズを表示します。forwardRef を使用する必要があり、両方のコンポーネントが機能する必要があります。

基本コンポーネント コード:

const StyledComp = () => {
  const [size, setSize] = useState({ width: 100, height: 100 });
  const [maxMin, setMaxMin] = useState({ max: 500, min: 100 });
  const [count, setCount] = useState(0);

  let ref = useRef(<Shape />);

  const handleResize = () => {
    const max = maxMin.max;
    const min = maxMin.min;
    let width = Math.floor(Math.random() * (max - min)) + min;
    let height = Math.floor(Math.random() * (max - min)) + min;
    setSize({ width, height });
    setCount(count+1);
  };
  return (
    <div className="styled-component">
      <Shape height={size.height} width={size.width} ref={ref}>
        <ShapeResult count={count} {...{ ref }} />
      </Shape>
      <p>Width: {size.width}</p>
      <p>Height: {size.height}</p>
      <button onClick={handleResize}>Generate</button>
    </div>
  );
};

コンポーネントは、props の幅と高さを持つ単純なスタイル付きコンポーネント div です。参照は問題なく取得されます。コンソールに出力でき、要素の現在のサイズが表示されます。しかし、innerRef.current.offsetWidth を介して幅/高さの値を取得しようとすると、前の世代の結果が取得されます。コードは次のとおりです。

const ShapeResult = ({ count }, ref) => {
  let innerRef = React.useRef(ref);
  const [countState, setCountState] = useState(0);
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  useEffect(() => {
    innerRef = ref;
    console.log(innerRef.current);
    setWidth(innerRef.current.offsetWidth);
    setHeight(innerRef.current.offsetHeight);
    setCountState(count);
  }, [count, ref]);

  return (
    <div className="shape-result">
      <p>Click count: {countState}</p>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};
const ForwardedResult = React.forwardRef(ShapeResult);
export default ForwardedResult;

どんな助けにも感謝します。私はあまりにも長い間答えを探していましたが、それほど難しい作業ではありません...

4

2 に答える 2

0

あなたのアプローチは間違っているようです。

以下に示すように、StyledCompコンポーネントでは、 を介して DOM にアクセスしますshapeResultForwardRef.current。

const StyledComp = () => {
  const [size, setSize] = useState({ width: 100, height: 100 });
  const [maxMin, setMaxMin] = useState({ max: 500, min: 100 });
  const [count, setCount] = useState(0);

  let ref = useRef(<Shape />);
  const shapeResultForwardRef = useRef(null); // add


  const handleResize = () => {
    const max = maxMin.max;
    const min = maxMin.min;
    let width = Math.floor(Math.random() * (max - min)) + min;
    let height = Math.floor(Math.random() * (max - min)) + min;
    setSize({ width, height });
    setCount(count+1);
  };
  return (
    <div className="styled-component">
      <Shape height={size.height} width={size.width} ref={ref}>
        <ShapeResult count={count} ref={shapeResultForwardRef} />
      </Shape>
      <p>Width: {size.width}</p>
      <p>Height: {size.height}</p>
      <button onClick={handleResize}>Generate</button>
    </div>
  );
};

別の：</p> 

const ShapeResult = ({ count }, ref) => {

  return (
    <div className="shape-result" ref={ref}>
      ...
    </div>
  );
};
const ForwardedResult = React.forwardRef(ShapeResult);
export default ForwardedResult;
于 2021-01-16T10:59:32.510 に答える