reactjs - node - ¿hay alguna forma de acceder a la instancia del componente padre en React?

reference input react

Question

Sé que no es un enfoque funcional para poder hacer algo como this.parent un this.parent en un componente React, y parece que no puedo encontrar ninguna propiedad en una instancia del componente Reaccionar que conduzca al padre, pero solo estoy buscando ser capaz de hacer algunas cosas personalizadas donde lo necesito.

Antes de que alguien pierda el tiempo explicando que no es el "camino" reactivo funcional, entiendo que lo necesito debido a lo siguiente que trato de lograr:

Construya un transpiler para el motor de plantillas de barra espaciadora de Meteor, cuyo modelo de representación toma en consideración componentes / plantillas principales.

Ya he construido un transpiler que modifica la salida jsx para lograr esto. Hago esto pasando parent={this} en todos los componentes secundarios compuestos. Sin embargo, después de que se me ocurrió que tal vez simplemente no sé de algo que me dará una forma de acceder a la instancia del componente principal sin modificaciones adicionales de transpilación .

Algunos consejos podrían ser muy apreciados.

Answer 1

No hay nada de malo si necesita acceder a los objetos y funciones de los padres.

El punto es que nunca deberías usar Reality Internals y APIs no documentadas.

En primer lugar, es probable que cambien (rompiendo su código) y, lo más importante, hay muchos otros enfoques que son más limpios.

Pasando accesorios a los niños

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    fn() {
        console.log(''parent'')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

const Child = ({ fn }) => <button onClick={fn}>Click me!</button>

Ejemplo de trabajo

Usar el contexto (si no hay una relación padre / hijo directa)

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    getChildContext() {
        return {
            fn: this.fn,
        }
    }

    fn() {
        console.log(''parent'')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

Parent.childContextTypes = {
    fn: React.PropTypes.func,
}

const Child = (props, { fn }) => <button onClick={fn}>Click me!</button>

Child.contextTypes = {
    fn: React.PropTypes.func,
}

Ejemplo de trabajo

Answer 2

Actualización para React 0.13 y más reciente

Component._owner quedó obsoleto en React 0.13, y _currentElement ya no existe como clave en this._reactInternalInstance . Por lo tanto, al usar la solución a continuación arroja Uncaught TypeError: Cannot read property ''_owner'' of undefined .

La alternativa es, a partir del React 16, this._reactInternalFiber._debugOwner.stateNode .

Ya has reconocido que esto no es algo bueno de hacer casi siempre, pero lo repito aquí para las personas que no leen la pregunta muy bien: esta es generalmente una forma incorrecta de hacer las cosas en Reaccionar.

No hay nada en la API pública que le permita obtener lo que desea. Es posible que pueda acceder a esto utilizando los componentes internos de React, pero dado que es una API privada, es probable que se rompa en cualquier momento.

Repito: casi seguramente no deberías usar esto en ningún tipo de código de producción.

Dicho esto, puede obtener la instancia interna del componente actual usando this. _reactInternalInstance this. _reactInternalInstance . Allí, puede obtener acceso al elemento a través de la propiedad _currentElement , y luego la instancia de propietario a través de _owner._instance .

Aquí hay un ejemplo:

var Parent = React.createClass({
  render() {
      return <Child v="test" />;
  },

  doAThing() {
    console.log("I''m the parent, doing a thing.", this.props.testing);
  }
});

var Child = React.createClass({
  render() {
    return <button onClick={this.onClick}>{this.props.v}</button>
  },

  onClick() {
    var parent = this._reactInternalInstance._currentElement._owner._instance;
    console.log("parent:", parent);
    parent.doAThing();
  }
});

ReactDOM.render(<Parent testing={true} />, container);

Y aquí hay un ejemplo de JSFiddle que funciona : http://jsfiddle.net/BinaryMuse/j8uaq85e/