React.forwardRef使用疑问：传递ref后current始终为null原因？

核心问题1：同一个ref被重复绑定 #

你将usernameRef同时绑定到了<input>和<InputClipboardButton>的ref属性上。React中一个ref对象只能关联一个DOM节点或组件实例，重复绑定会导致ref的指向冲突，最终无法正确关联到目标input元素，导致current为null。

问题2：ClipboardButton组件未返回JSX #

ClipboardButton作为函数组件，没有明确返回<button>元素，这会导致组件无法渲染，属于语法错误。

修复后的代码示例 #

Details.jsx

import { useRef } from 'react';
import ClipboardButton from './ClipboardButton';

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

    // 直接把input的ref通过props传给ClipboardButton即可，无需额外封装forwardRef组件
    return (
        <div>
            <input type="text" ref={usernameRef} />
            <ClipboardButton targetInputRef={usernameRef} />
        </div>
    );
};

ClipboardButton.jsx

const ClipboardButton = ({ targetInputRef }) => {
    const copyToClipboard = () => {
        // 现在可以正确获取到input的DOM节点
        console.log(targetInputRef.current);
        if (targetInputRef.current) {
            targetInputRef.current.select();
            document.execCommand('copy');
        }
    };

    // 必须明确返回JSX元素
    return (
        <button onClick={copyToClipboard}>
            Copy
        </button>
    );
};

export default ClipboardButton;

补充说明：若需使用forwardRef的场景 #

如果你的业务场景确实需要给InputClipboardButton自身绑定ref，同时传递input的ref，可以这样调整：

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

const Details = () => {
    const usernameRef = useRef(null);
    // 单独创建ref用于关联InputClipboardButton自身
    const buttonRef = useRef(null);

    const InputClipboardButton = forwardRef((props, ref) => {
        // ref指向buttonRef，用于关联组件自身
        // 通过props传递input的ref给子组件
        return <ClipboardButton ref={ref} targetInputRef={props.targetInputRef} />;
    });

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

内容的提问来源于stack exchange，提问作者Karolis