javascript - sistema - Reaccionar es6 | Cómo acceder a las funciones del componente hijo a través de refs

sistema de archivos de windows 10

Question

Los documentos para React indican que un componente principal puede acceder a las funciones de los componentes a través de refs. Consulte: https://facebook.github.io/react/tips/expose-component-functions.html

Estoy intentando usar esto en mi aplicación pero me encuentro con un error "no definido no es una función" cuando se llama a la función secundaria. Me pregunto si esto tiene algo que ver con el uso del formato ES6 para las clases React porque no veo ninguna otra diferencia entre mi código y los documentos.

Tengo un componente de diálogo que se parece al siguiente pseudocódigo. El cuadro de diálogo tiene un botón "Guardar" que llama a save (), que necesita llamar a la función save () en el componente de contenido secundario. El componente de Contenido recopila información de los campos de formulario secundarios y realiza la operación de guardar.

class MyDialog extends React.Component {
  save() {
    this.refs.content.save();                    <-- save() is undefined
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() {
    // Get values from child fields
    // and save the content
  }
}

En su lugar, podría pasar un prop (saveOnNextUpdate) a Contenido y luego ejecutar guardar siempre que sea cierto, pero preferiría averiguar cómo hacer que funcione el método detallado en el documento Reacción anterior.

¿Alguna idea sobre cómo lograr que el enfoque del documento funcione o acceda a la función del componente secundario de una manera diferente?

Answer 1

Redux connect acepta un parámetro de opción como el cuarto parámetro. En este parámetro de opción puede establecer el indicador withRef en verdadero. Luego, puede acceder a las funciones a las referencias utilizando getWrappedInstance (). Me gusta esto:

class MyDialog extends React.Component {
  save() {
    this.refs.content.getWrappedInstance().save();
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() { ... }
}

function mapStateToProps(state) { ... }

module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content);

Lea más sobre esto aquí: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Vale la pena leer este artículo sobre el uso de referencias y considerar si hay mejores enfoques: https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

Answer 2

Resulta que el m90 tenía razón: este era un problema completamente diferente. Estoy publicando la solución en caso de que alguien encuentre el mismo problema en el futuro.

Mi aplicación está construida con Redux, y el problema se deriva del uso de la función de conexión react-redux para conectar un componente a la tienda / estado global. Por alguna razón, exportar un componente y conectarlo a la tienda hace que sea imposible acceder a las funciones dentro de él. Para solucionar esto, tuve que eliminar todo uso del estado global del Contenido para poder exportarlo como un componente "tonto".

Para ser más claros, Content.js se veía así:

var connect = require(''react-redux'').connect;

class Content extends React.Component {
  save() {
    // Get values from child fields
    // and save the content

    // Use of this.props.stateObject
  }
}

function mapStateToProps(state) {
  const {
    stateObject
  } = state;

  return {
    stateObject
  };
}

module.exports = connect(mapStateToProps)(Content);

Al eliminar el uso del estado global (y, por lo tanto, el uso de connect y mapStateToProps me permitió exportar el componente usando:

module.exports = Content;

El acceso a this.refs.content.save () funcionó mágicamente después de hacer esto.

Answer 3

Una forma alternativa de hacer esto sería usar otro nombre de prop (que no sea ref ). Descubrí que esto también funciona bien si está utilizando una biblioteca como styled-components o emotion Por ejemplo, en un MyComponent conectado:

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