Redux: ¿Qué pasa con los árbitros?

Creado en 27 jun. 2015  ·  8Comentarios  ·  Fuente: reduxjs/redux

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?

help wanted question

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'

Todos 8 comentarios

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

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

amorphius picture amorphius  ·  3Comentarios

benoneal picture benoneal  ·  3Comentarios

mickeyreiss-visor picture mickeyreiss-visor  ·  3Comentarios

caojinli picture caojinli  ·  3Comentarios

parallelthought picture parallelthought  ·  3Comentarios