it-swarm.com.ru

React ref возвращает объект 'Connect' вместо DOM

Я пытаюсь создать динамические ссылки для пользовательских компонентов, созданных с помощью функции карты.

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. Screenshot

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

6
Andrew Park

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

Вам нужно будет связаться с withRef: true:

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

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

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

Из документов :

[withRef] (Boolean): если true, сохраняет ссылку на экземпляр обернутого компонента и делает его доступным через метод getWrappedInstance (). Значение по умолчанию: false

24
Or B

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

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

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

1
Divyanshu Maithani