React.createRef() 不起作用 - 不能给函数组件提供参考答案

【问题标题】：React.createRef() does not work - Function components cannot be given refsReact.createRef() 不起作用 - 不能给函数组件提供参考
【发布时间】：2020-10-07 15:29:13
【问题描述】：

我有这个父类组件

class TransferHolder extends Component {

    constructor(props) {
        super(props);
        this.transfer = React.createRef();
    }

    render() {
        return (
            <div>
                <h1>HELLO !</h1>
                <Transfer ref={this.transfer}/>
                <Button onClick={() => {
                    const TransferRef = this.transfer.current;
                    console.log('Selected: ',
                        TransferRef.state.projectForm.users.right)
                }}>
                    Print
                </Button>
            </div>

        )
    }

}

const mapStateToProps = state => {
    return {
        
    };
};

const mapDispatchToProps = dispatch => {
    return {
        
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(TransferHolder);

当我访问该页面时，会自动显示一条错误消息：

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `TransferHolder`.
    in ConnectFunction (at TransferHolder.js:19)
    in div (at TransferHolder.js:17)
    in TransferHolder (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Content (at ContentRoute.js:23)

我只想访问<Transfer> 组件的状态，它是一个基于类的组件。但是它也包含在 redux connect() 中，所以我不知道这是否会将其转换为功能性的。

【问题讨论】：

如何将你的组件 Transfer 包装成一个返回 Transfer 的函数组件，并使用额外的道具将该 ref 作为属性传递给 Transfer？
并尝试通过 ref 获取状态似乎是不可能的？ ref 代表 DOM 对象
我是新来的反应你能告诉我代码吗，因为我不明白。

标签： reactjs react-ref

【解决方案1】：

假设您的组件 Transfer 的代码如下所示：

const Transfer = props => <p {...props}>Some Transfer component</p>;

如果你像上面那样使用这个组件

<Transfer ref={this.transfer} />

它将失败并显示上述错误消息

警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

因为普通函数组件默认是无法处理 refs 的。为避免该错误，您必须将组件包装在 forwardRef 中：

const Transfer = forwardRef((props, ref) => <p {...props} ref={ref}>Some Transfer component</p>;

【讨论】：