javascript 如何使用React.forwardRef？

t98cgbkg 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(114)

我想用forwardRef把ref传递给一个子组件，但是给定ref的current总是null，为什么？
考虑这个简单的例子：

// Details.jsx
import { useRef, forwardRef } from 'react';

const Details = () => {
    const usernameRef = useRef(null);

    const InputClipboardButton = React.forwardRef((props, ref) => (
        <ClipboardButton targetInputRef={ref} />
    ));

    return (
        <div>
            <input type="text" ref={usernameRef} />
            <InputClipboardButton ref={usernameRef} />
        </div>
    );
};

// ClipboardButton.jsx
const ClipboardButton = ({ targetInputRef }) => {
    const copyToClipboard = () => {
        console.log(targetInputRef);
    }

    <button onClick={copyToClipboard}>
        Copy
    </button>
};

JavaScript

来源：https://stackoverflow.com/questions/75068660/how-to-use-react-forwardref

2条答案

按热度按时间

piztneat1#

使用forwardRef时，必须注意传递参数的顺序（props和ref）：
可按如下方式定义零部件：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

- 请注意**forwardRef如何使用两个参数：

prop
1.正在转发的ref
您还可以对props值进行结构化，并将ref属性命名为其他名称：
x一个一个一个一个x一个一个二个x
示例改编自React Docs

赞(0）回复(0）举报 2023-01-11

eblbsuwk2#

剪贴板按钮是一个组件，因此您还必须在此组件中使用forwardRef

const ClipboardButton = forwardRef((props,ref) => {
        const copyToClipboard = () => {
           console.log(ref);
        }

        <button onClick={copyToClipboard}>
            Copy
        </button>
   });

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 如何使用React.forwardRef？

2条答案

相关问题

热门标签

最新问答