ref 未定义反应答案

【问题标题】：ref is not defined reactref 未定义反应
【发布时间】：2021-09-20 16:26:36
【问题描述】：

import React, { forwardRef } from 'react';

const Post = forwardRef(({name, description, message, photoUrl }) => {
  return (
    <div ref={ref} className="post">
      <div className="post_header">
        <Avatar src={photoUrl}>{name[0]}</Avatar>
        <div className="post_info">
          <h2>{name}</h2> 
          <p>{description}</p>
        </div> 
      </div>
      <div className="post_body">
        <p>{message}</p> 
      </div>
      <div className="post_buttons">
        <InputOption Icon={ThumbUpAltIcon} title="Like" color="gray" />
        <InputOption Icon={ChatIcon} title="Comment" color="gray" />
        <InputOption Icon={ShareIcon} title="Share" color="gray" />
        <InputOption Icon={SendIcon} title="Send" color="gray" />
      </div>
    </div>
  )
});

es-lint 错误 'ref' 未定义

【问题讨论】：

标签： reactjs react-forwardref

【解决方案1】：

你在包装时错过了这个ref。见以下代码：-

const Post = forwardRef(({name, description, message, photoUrl }, ref) => { 
return (... )}

【讨论】：

【解决方案2】：

您必须在 props arg 之后添加 ref arg：

const Post = forwardRef(({name, description, message, photoUrl }, ref) => {

Forwarding refs to dom components.

【讨论】：