React ref returns a 'Connect' object instead of a DOM

Question

I am trying to create dynamic links for custom components created using the map function.

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

Run codeHide result

console.logreturns the correct DOM node for refs.test, but for those in the loop, returns an object Connect.

Can someone point me in the right direction?

Answer 1

It seems to be Posta connected component, while you really want a wrapped component.

You will need to connect to withRef: true:

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

then use getWrappedInstance()to get the base connected component:

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

docs:

[withRef] (Boolean): true, ref getWrappedInstance(). : false

Answer 2

- ( ref). :

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

, styled-components emotion