我想将Child1(Child)组件中的数据,数组,字符串,数字传递到App(Parent)组件中。
有一个父母是基于班级的,而孩子是基于功能的。
上级:
import React, { Component } from "react"; import "./App.css"; import Child1 from "./Child1/Child1"; class App extends Component { state = { message: "" }; callbackFunction = (event) => { this.setState({ message: event.target.value }); } render() { return ( <div className="App"> <Child1 /> </div> ); } } export default App;
儿童
import React from 'react' const Child1 = (props) => { return ( <div> </div> ); } export default Child1;
我已经使用组合功能类- 功能组件传递数据为您创建了另一个解决方案。这是https://codesandbox.io的实时代码。单击并检查。
应用程序组件
import React, { useState } from "react"; import "./styles.css"; import Child from "./child"; export default function App() { const [name, setName] = useState("Orignal Button"); const [count, setCount] = useState(0); const handleClick = _name => { setName(_name); setCount(count + 1); }; const resetClick = e => { setName("Orignal Button"); setCount(0); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Child name={name + " - " + count} handleClick={handleClick} resetClick={resetClick} /> </div> ); }
child1组件
import React from "react"; import Child2 from "./child2"; class Child extends React.Component { constructor(props) { super(props); } render() { return ( <> <h2>This is child</h2> <button onClick={e => this.props.handleClick("New Name changed")}> {this.props.name} </button> <Child2 handleChilc2Click={this.props.resetClick} /> </> ); } } export default Child;
另一个组件Child2
import React from "react"; const Child2 = props => { return ( <> <h2>Child 2</h2> <button onClick={e => props.handleChilc2Click(e)}> Click me for reset Parent default </button> </> ); }; export default Child2;
您可以从中获得一些帮助。 谢谢