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

Question

我正在尝试为通过地图功能创建的自定义组件创建动态参考。

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返回refs.test的正确DOM节点，但对于循环中的节点，它返回Connect对象。

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

Answer 1

似乎Post是一个连通组件，而你实际上想要包裹它。

您必须与withRef: true：

联系

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

然后使用getWrappedInstance()获取基础连接组件：

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

来自docs：

  

[withRef]（Boolean）：如果为true，则将ref存储到包装的组件实例，并通过getWrappedInstance（）方法使其可用。默认值：false

Answer 2

另一种方法是使用其他一些道具名称（ref除外）。例如：

<Post
  ...
  innerRef={(node) => { this.myRef = node; }}
/>

如果您使用的是styled-components或emotion

等库，这也可以使用