“Los datos de los niños a los padres que pasan en React” Código de respuesta

Los datos de los niños a los padres que pasan en React

Following are the steps to pass data from child component to parent component:

-In the parent component, create a callback function.
-This callback function will retrieve the data from the child component.
-Pass the cb function to the child as a props from the parent component.
-The child component calls the parent callback function using
props and passes the data to the parent component.

// example :
// step 1:: 
//->Parent component
//-> Create a callback function in Parent component.
import Child from './components/Child';
function App() {
  const alertFunc = (data) => {
    alert(data)
  }
  return (
// step 2:: Pass the cb function to the child component as a props.
    <Child newFunc={alertFunc} />
  );
}
export default App;
 
// step 3:: 
const Child = (props) => {
  // Data in child component
  const data = "HEY abi"
  return (<>
    <h1>{props.data}</h1>
//step 4::The child component calls the parent cb function using props
    <button onClick={() => props.newFunc(data)}>Click Me</button>
  </>);
}
export default Child;
Abhishek

Pase los datos del componente infantil al componente principal

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, document.getElementById("root"));
|_Genos_|

Pase el elemento de niño a otro reaccionar

Parent:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

Child:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}
Sticky Pingu

Pase los datos del componente infantil al componente principal

import React, { useState } from "react";

let myState = {};

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  myState.name=name;
  myState.setName=setName;
  return (
    <>
      <div>{name}</div>
      <Parent />
    </>
  );
};
export default GrandParent;

const Parent = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child />
    </>
  );
};

const Child = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};
Inquisitive Ibex

Pase los datos del componente infantil al componente principal

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};
Inquisitive Ibex

Respuestas similares a “Los datos de los niños a los padres que pasan en React”

Preguntas similares a “Los datos de los niños a los padres que pasan en React”

Más respuestas relacionadas con “Los datos de los niños a los padres que pasan en React” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código

Shell/Bash
C#
C++
C
CSS
HTML
Java
JavaScript
Objective-C
PHP
Python
Sql
Swift
Ruby
TypeScript
Go
Kotlin
Assembly
R
VBA
Scala
Rust
Dart
Elixir
Clojure
Haskell
Matlab
Erlang
Cobol
Fortran
Scheme
Perl
Groovy
Lua
Julia
Delphi
Abap
Lisp
Prolog
Pascal
ActionScript
Basic
Solidity
PowerShell
GDScript
Excel