“Kind zu übergeordneten Daten, die in React bestehen” Code-Antworten

Kind zu übergeordneten Daten, die in React bestehen

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

Übergeben Sie Daten von der untergeordneten Komponente an die übergeordnete Komponente

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_|

Übergeben Sie Element von Child zu Elternreaktion

Parent:

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

Child:

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

Übergeben Sie Daten von der untergeordneten Komponente an die übergeordnete Komponente

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

Übergeben Sie Daten von der untergeordneten Komponente an die übergeordnete Komponente

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

Ähnliche Antworten wie “Kind zu übergeordneten Daten, die in React bestehen”

Fragen ähnlich wie “Kind zu übergeordneten Daten, die in React bestehen”

Weitere verwandte Antworten zu “Kind zu übergeordneten Daten, die in React bestehen” auf JavaScript

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen

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