React ref返回一个'Connect'对象而不是DOM

Question

我正在尝试为通过map函数创建的自定义组件创建动态参考.

class PostsList extends Component {

  constructor(props) {
    super(props);
  }

  componentDidUpdate = () => {
    console.log(this.refs);
  }

  render() {
    let posts = this.props.posts || [];
    return (
        <div ref="test">
          {posts.map((post) => {
            return <Post post={post} key={post.id} ref={post.id}></Post>
          })}
        </div>
    );
  }

}

export default PostsList

在console.log返回正确的DOM节点refs.test,但在循环的那些,它返回一个Connect对象.

有人能指出我正确的方向吗？

Answer 1

它似乎Post是一个连接组件,而你实际上想要包装它.

你必须连接withRef: true:

connect(null, null, null, { withRef: true })(Post);

然后getWrappedInstance()用来获取底层连接组件:

this.refs[<id>].getWrappedInstance()

来自文档:

[withRef](Boolean):如果为true,则将ref存储到包装的组件实例,并通过getWrappedInstance()方法使其可用.默认值:false