0
393
VistasReact ref devuelve un objeto 'Conectar' en lugar de DOM
Estoy tratando de crear referencias dinámicas para componentes personalizados creados a través de la función de mapa.
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 el archivo console.log devuelve el nodo DOM correcto para refs.test pero para los que están en el bucle, está devolviendo un objeto de Connect . 
¿Alguien me puede apuntar en la dirección correcta?
2 Respuestas
Responde la pregunta0
Parece que Post es un componente conectado, mientras que en realidad quieres el envuelto.
react-redux ≥ 6.0.0
Conectar con forwardRef: true
connect(null, null, null, { forwardRef: true })(Post);luego agregue una referencia normalmente:
ref={ref => this.<id> = ref}De los documentos :
Si se ha pasado
{forwardRef : true}aconnect, agregar una referencia al componente contenedor conectado en realidad devolverá la instancia del componente envuelto.
react-redux < 6 Conectar con withRef: true
connect(null, null, null, { withRef: true })(Post); luego use getWrappedInstance() para obtener el componente conectado subyacente:
this.refs[<id>].getWrappedInstance()De los documentos :
[withRef] (booleano): si es verdadero, almacena una referencia a la instancia del componente envuelto y la pone a disposición a través del método
getWrappedInstance(). Valor predeterminado:false
0
Una forma alternativa de hacer esto sería usar algún otro nombre de accesorio (que no sea ref ). Por ejemplo:
<Post ... innerRef={(node) => { this.myRef = node; }} /> Esto también funciona si está utilizando una biblioteca como styled-components o emotion