javascript - 理解: 警告: 関数コンポーネントに参照を与えることはできません

Question

refs は、状態を変更せずに DOM 要素に直接アクセスするために使用されることを知っています。関数コンポーネントには状態がないため、参照を与えることはできないと読みました。

関数コンポーネントに参照を追加することはできません。ただし、ref を定義して、それらを DOM 要素またはクラス コンポーネントに添付することはできます。肝心なのは、関数コンポーネントにはインスタンスがないため、参照できないということです。

から取得: https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/

まだわかりません。

TooltipAnt Design のコンポーネント ( https://ant.design/components/tooltip/ )、Buttonコンポーネント、およびカスタムコンポーネントを使用していCircleButtonます。

次の JSX があるとします。

<Tooltip placement="left" title={"Lock slot"}>
  <CircleButton onClick={() => execute(client.close)} icon={<LockOutlined />} disabled={loading} />
</Tooltip>

そして私の CircleButton コンポーネント。このように使用すると、警告が生成されます。

const CircleButton = (props) => // gives the warning
  <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />

警告: 関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。React.forwardRef() を使用するつもりでしたか?

警告にもかかわらず、すべてが期待どおりに機能することに注意してください。

ただし、次のように編集すると正常に動作しますが、なぜですか?

const CircleButton = forwardRef((props, ref) => // doesn't give the warning
  <div ref={ref}>
    <Button shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />
  </div>)

divコンポーネントには状態がありますか? 理解できません。forwardRef何らかの魔法をかけて div 要素の状態を作成していますか?

refをコンポーネントに渡すと、Buttonそれでも警告が表示されるのはなぜですか?

const CircleButton = forwardRef((props, ref) => // gives the warning
  <Button ref={ref} shape="circle" size="small" style={{ marginRight: "8px" }} {...props} />)

antd Buttonを子として直接渡すと、機能します。しかし、これは、antd ボタンには状態があるため、参照を持つことができると思われるためです。

<Tooltip placement="left" title={"Lock slot"}> // doesn't give the warning
  <Button shape="circle" size="small" style={{ marginRight: "8px" }} />
</Tooltip>