Si uso un <Connector>
alrededor de algunos componentes que tienen un atributo ref
, ya no puedo acceder a él a través de this.refs
. Simplemente refactoricé un poco para solucionarlo; supongo que esto es algo en vano de componentes inteligentes versus tontos. ¿O me estoy perdiendo algo simple?
componentes inteligentes versus tontos
Creo que sí, su componente _smart_ con Connector
debería simplemente representar los componentes _dumb_ y pasarles los props
.
@cymen , puedes usar una devolución de llamada de referencia para esto :)
const decorator = (Base) => {
return class {
render() {
return <Base {...this.props} />
}
}
}
<strong i="7">@decorator</strong>
class Test {
render () {
return <div ref={this.props.refCallback}>my div</div>;
}
}
class Wrapper {
componentWillMount() {
this.nestedRef = null;
}
componentDidMount() {
console.log(React.findDOMNode(this.nestedRef));
}
setNestedRef = (ref) => {
this.nestedRef = ref;
}
render() {
return <Test refCallback={this.setNestedRef} />
}
}
Lo anterior registrará el div. ¿Quizás esto ayude?
Esto usa un decorador, pero probablemente funcionaría también si pasa una devolución de llamada a sus componentes que anida dentro de Connector
. Dentro de la devolución de llamada, puede volver a asignar la referencia a su componente.
¿Realmente necesitas una referencia anidada?
Si solo desea acceder al nodo DOM, puede hacer findDOMNode
en el componente externo y funcionará bien. (Apuntarán al mismo nodo).
Si desea llamar a métodos, considere usar props
como interfaz declarativa. Consulte también https://github.com/jsstyles/react-jss/issues/15 para ver una discusión sobre esto.
Finalmente, si está _cierto_ necesita una referencia, sí, puede tomar una referencia anidada como @johanneslumpe sugerida en https://github.com/gaearon/redux/issues/183#issuecomment -115988937.
Cierre, avíseme si algo no está claro.
Lo siento, pero no veo cómo alentar el uso de 'findDOMNode' en un caso tan trivial puede incluso considerarse una solución. ¡Esto es un anti-patrón! Nos devuelve a los días de jquery donde necesitamos acceder a todos los elementos y conocer exactamente la jerarquía de los nodos. Tus documentos leen con razón:
'findDOMNode () es una trampilla de escape ... se desaconseja el uso de esta trampilla de escape porque atraviesa la abstracción del componente'
Lo siento, pero no veo cómo alentar el uso de 'findDOMNode' en un caso tan trivial puede incluso considerarse una solución. ¡Esto es un anti-patrón! Nos devuelve a los días de jquery donde necesitamos acceder a todos los elementos y conocer exactamente la jerarquía de los nodos.
No estoy seguro de lo que quieres decir. Estoy diciendo que, si necesita una referencia al nodo renderizado (por ejemplo, para calcular su desplazamiento y tamaño), puede usar findDOMNode(this)
. No te estoy sugiriendo que "profundices" o lo mutes.
Dicho esto, si no está satisfecho con esto, simplemente use los accesorios de devolución de llamada de referencia como se sugirió anteriormente.
No creo que debamos depender de findDOMNode(this)
ya que no es aplicable a React-Native.
@xvalentino findDOMNode no es necesario. Vea los bits relacionados con getWrappedInstance
en los documentos de la
Comentario más útil
Lo siento, pero no veo cómo alentar el uso de 'findDOMNode' en un caso tan trivial puede incluso considerarse una solución. ¡Esto es un anti-patrón! Nos devuelve a los días de jquery donde necesitamos acceder a todos los elementos y conocer exactamente la jerarquía de los nodos. Tus documentos leen con razón:
'findDOMNode () es una trampilla de escape ... se desaconseja el uso de esta trampilla de escape porque atraviesa la abstracción del componente'