reactjs - ref 未定义反应

Question

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' 未定义

Answer 1

您必须在refarg 之后添加propsarg：

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

将 refs 转发到 dom 组件。

Answer 2

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

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