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 возвращает правильный узел DOM для refs.test, но и для тех, в петле, он возвращает объект Connect.

Может кто-нибудь указать мне в правильном направлении?

Answer 1

Похоже, что Post является подключенным компонентом, в то время как вы действительно хотите обернутый.

Вы должны связаться с withRef: true:

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

затем использовать getWrappedInstance(), чтобы получить лежащий в основе компонента связности:

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

Из docs:

[withRef] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Default value: false

Answer 2

Альтернативным способом сделать это было бы использование некоторых других пропусков e (кроме ref). Например:

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

Это также работает, если вы используете библиотеку как styled-components или emotion