javascript - tablas - Llamar al método hijo desde el padre

obtener los hijos de un elemento javascript

Question

Tengo dos componentes

1. Componente principal
2. Componente hijo

Estaba tratando de llamar al método del niño desde Parent, intenté de esta manera pero no pude obtener un resultado

class Parent extends Component {
  render() {
    return (
      <Child>
        <button onClick={Child.getAlert()}>Click</button>
      </Child>
      );
    }
  }

class Child extends Component {
  getAlert() {
    alert(''clicked'');
  }

  render() {
    return (
      <h1 ref="hello">Hello</h1>
    );
  }
}

¿Hay alguna forma de llamar al método del niño desde el padre?

Nota: Los componentes secundarios y principales están en dos archivos diferentes.

Answer 1

Creo que la forma más básica de llamar a los métodos es estableciendo una solicitud en el componente secundario. Luego, tan pronto como el niño maneja la solicitud, llama a un método de devolución de llamada para restablecer la solicitud.

El mecanismo de reinicio es necesario para poder enviar la misma solicitud varias veces una tras otra.

En componente principal

En el método de representación del padre:

const { request } = this.state;
return (<Child request={request} onRequestHandled={()->resetRequest()}/>);

El padre necesita 2 métodos, para comunicarse con su hijo en 2 direcciones.

sendRequest() {
  const request = { param: "value" };
  this.setState({ request });
}

resetRequest() {
  const request = null;
  this.setState({ request });
}

En componente hijo

El niño actualiza su estado interno, copiando la solicitud de los accesorios.

constructor(props) {
  super(props);
  const { request } = props;
  this.state = { request };
}

static getDerivedStateFromProps(props, state) {
  const { request } = props;
  if (request !== state.request ) return { request };
  return null;
}

Luego, finalmente maneja la solicitud y envía el restablecimiento al padre:

componentDidMount() {
  const { request } = this.state;
  // todo handle request.

  const { onRequestHandled } = this.props;
  if (onRequestHandled != null) onRequestHandled();
}

Answer 2

En primer lugar, permítanme expresar que, en general, esta no es la forma de hacer las cosas en React land. Por lo general, lo que desea hacer es transmitir la funcionalidad a los niños en accesorios y pasar notificaciones de los niños en eventos (o mejor aún: dispatch ).

Pero si debe exponer un método imperativo en un componente secundario, puede usar refs . Recuerde que esta es una compuerta de escape y generalmente indica que hay un mejor diseño disponible.

Anteriormente, las referencias solo eran compatibles con componentes basados ​​en la clase. Con el advenimiento de React Hooks , ese ya no es el caso

Uso de ganchos y componentes de función ( >= [email protected] )

import React, { forwardRef, useRef, useImperativeHandle } from ''react'';

// We need to wrap component in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function component.
const Child = forwardRef((props, ref) => {

  // The component instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

Ejemplo de funcionamiento

La documentación para useImperativeHandle() está here :

useImperativeHandle personaliza el valor de instancia que se expone a los componentes principales cuando se usa ref .

Usando componentes de clase ( >= [email protected] )

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert(''getAlert from Child'');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById(''root''));

Ejemplo de funcionamiento

API heredada ( <= [email protected] )

Para fines históricos, este es el estilo basado en la devolución de llamada que usaría con las versiones React anteriores a 16.3:

const { Component } = React;
const { render } = ReactDOM;

class Parent extends Component {
  render() {
    return (
      <div>
        <Child ref={instance => { this.child = instance; }} />
        <button onClick={() => { this.child.getAlert(); }}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert(''clicked'');
  }

  render() {
    return (
      <h1>Hello</h1>
    );
  }
}


render(
  <Parent />,
  document.getElementById(''app'')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Answer 3

Podemos usar referencias de otra manera como-

Vamos a crear un elemento Parent, que representará un componente <Child/> . Como puede ver, el componente que se representará, debe agregar el atributo ref y proporcionarle un nombre.
Luego, la función triggerChildAlert , ubicada en la clase padre, accederá a la propiedad triggerChildAlert este contexto (cuando se triggerChildAlert función triggerChildAlert accederá a la referencia secundaria y tendrá todas las funciones del elemento secundario).

class Parent extends React.Component {
    triggerChildAlert(){
        this.refs.child.callChildMethod();
        // to get child parent returned  value-
        // this.value = this.refs.child.callChildMethod();
        // alert(''Returned value- ''+this.value);
    }

    render() {
        return (
            <div>
                {/* Note that you need to give a value to the ref parameter, in this case child*/}
                <Child ref="child" />
                <button onClick={this.triggerChildAlert}>Click</button>
            </div>
        );
    }
}  

Ahora, el componente hijo, como se diseñó teóricamente anteriormente, se verá así:

class Child extends React.Component {
    callChildMethod() {
        alert(''Hello World'');
        // to return some value
        // return this.state.someValue;
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

Aquí está el código fuente
¡La esperanza te ayudará!

Answer 4

Puede realizar la Inversión de herencia (búsquela aquí: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e ). De esa manera, tiene acceso a la instancia del componente que estaría envolviendo (por lo tanto, podrá acceder a sus funciones)

Answer 5

Puedes usar otro patrón aquí:

class Parent extends Component {
 render() {
  return (
    <div>
      <Child setClick={click => this.clickChild = click}/>
      <button onClick={() => this.clickChild()}>Click</button>
    </div>
  );
 }
}

class Child extends Component {
 constructor(props) {
    super(props);
    this.getAlert = this.getAlert.bind(this);
 }
 componentDidMount() {
    this.props.setClick(this.getAlert);
 }
 getAlert() {
    alert(''clicked'');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

Lo que hace es establecer el método clickChild del padre cuando se monta el hijo. De esta manera, cuando hace clic en el botón principal, llamará a clickChild que llama a getAlert del niño.

Esto también funciona si su hijo está envuelto con connect() por lo que no necesita el getWrappedInstance() .

Tenga en cuenta que no puede usar onClick={this.clickChild} en padre porque cuando el padre se representa hijo no está montado, por lo que this.clickChild todavía no está asignado. Usar onClick={() => this.clickChild()} está bien porque cuando haces clic en el botón this.clickChild ya debería estar asignado.

Answer 6

Si está haciendo esto simplemente porque quiere que el Niño proporcione un rasgo reutilizable a sus padres, entonces puede considerar hacerlo usando accesorios de renderizado .

Esa técnica realmente pone la estructura al revés. El Child ahora envuelve al padre, por lo que le he cambiado el nombre a AlertTrait continuación. Mantuve el nombre Parent por continuidad, aunque en realidad no es un parent ahora.

// Use it like this:

  <AlertTrait renderComponent={Parent}/>


class AlertTrait extends Component {
  // You may need to bind this function, if it is stateful
  doAlert() {
    alert(''clicked'');
  }
  render() {
    return this.props.renderComponent(this.doAlert);
  }
}

class Parent extends Component {
  render() {
    return (
      <button onClick={this.props.doAlert}>Click</button>
    );
  }
}

En este caso, AlertTrait proporciona uno o más rasgos que pasa como accesorios a cualquier componente que se le haya dado en su accesorio renderComponent .

El padre recibe doAlert como accesorio y puede llamarlo cuando sea necesario.

(Para mayor claridad, llamé al prop renderComponent en el ejemplo anterior. Pero en los documentos React vinculados anteriormente, simplemente lo llaman render ).

El componente Trait puede representar cosas que rodean al elemento primario, en su función de representación, pero no representa nada dentro del elemento primario. En realidad, podría procesar cosas dentro del padre, si pasara otro accesorio (por ejemplo, renderChild ) al padre, que el padre podría usar durante su método de renderizado.

Esto es algo diferente de lo que solicitó el OP, pero algunas personas podrían terminar aquí (como lo hicimos nosotros) porque querían crear un rasgo reutilizable, y pensaron que un componente hijo era una buena manera de hacerlo.

Answer 7

https://facebook.github.io/react/tips/expose-component-functions.html para obtener más respuestas, consulte aquí Métodos de llamada en componentes React child

Al examinar las referencias del componente "razón", está rompiendo la encapsulación y haciendo imposible refactorizar ese componente sin examinar cuidadosamente todos los lugares donde se utiliza. Debido a esto, recomendamos encarecidamente tratar las referencias como privadas para un componente, al igual que el estado.

En general, los datos deben pasarse por el árbol a través de accesorios. Hay algunas excepciones a esto (como llamar a .focus () o activar una animación única que realmente no "cambia" el estado), pero cada vez que expones un método llamado "set", los accesorios generalmente son Una mejor opción. Intente hacer que el componente de entrada interno se preocupe por su tamaño y apariencia para que ninguno de sus antepasados ​​lo haga.

Answer 8

Puede lograr esto fácilmente de esta manera

Pasos-

1. Cree una variable booleana en el estado de la clase primaria. Actualice esto cuando desee llamar a una función.
2. Cree una variable prop y asigne la variable booleana.

3. Desde el componente secundario, acceda a esa variable utilizando accesorios y ejecute el método que desee teniendo una condición if.

   class Child extends Component {
      Method=()=>{
      --Your method body--
      }
      render() {
        return (
       //check whether the variable has been updated or not
         if(this.props.updateMethod){
           this.Method();
         }
        )
      }
   }
   
   class Parent extends Component {
   
   constructor(){
     this.state={
      callMethod:false
     }
   
   }
   render() {
      return (
   
        //update state according to your requirement
        this.setState({
           callMethod:true
        }}
        <Child updateMethod={this.state.callMethod}></Child>
       );
      }
   }