React refはDOMの代わりに 'Connect'オブジェクトを返します

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.logrefs.testの正しいDOMノードを返しますが、ループ内のもののために、それはConnectオブジェクトを返します。

誰かが正しい方向に向かうことができますか？

Answer 1

Postは接続されたコンポーネントですが、実際にはラップされたものが必要です。

あなたはwithRef: trueに接続する必要があります：docsから

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

：

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

Answer 2

代替

が

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

その後、基礎となる接続コンポーネントを取得するためにgetWrappedInstance()を使用しますこれを行う方法は、いくつかの他のプロップの名前を使用することですe（ref以外）。たとえば：あなたは私の `Post.jsx`でstyled-componentsまたはemotion