html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Subassemblies App.js
// imports react
import React from 'react';
// class declaration class
class App extends React.Component {
//Construction method
constructor(){
super();
this.state = {
inputValue:''
}
}
// button click event
handleClick(){
Getdata // Get method of the parent component by props attribute, and the value is passed past this.state
this.props.getdata(this.state.inputValue);
}
// input box event for assignment to this.state
handleChange(e){
this.setState({
inputValue: e.target.value
});
}
// Render
render(){
return (
<React.Fragment>
{/ * Set of events The method of assembly,
Methods named assembly called names,
Set the binding this point the caller
*/}
<input onChange={this.handleChange.bind(this)}></input>
<Button onClick = {this.handleClick.bind (this)}> Click for data </ button>
</React.Fragment>
);
}
}
// throw out
export default App;
Subassemblies Son.js
// imports react
import React from 'react';
// class declaration class
class Son extends React.Component {
//Construction method
constructor(){
super();
this.state = {
}
}
// Render
render(){
return (
<React.Fragment>
<Div> Get parent component data: {this.props.mess} </ div>
</React.Fragment>
);
}
}
// throw out
export default Son;
Parent component Person.js
// imports react
import React from 'react';
// the introduction of sub-assemblies
import App from './App';
import Son from './Son';
// class declaration class
class Person extends React.Component{
//Construction method
constructor(){
super();
this.state = {
mess: '' // initialize attributes mess
}
}
@ A method for receiving value transfer subassembly, the subassembly is passed over the parameter values
getDatas(msg){
// the value of the sub-assembly is transmitted over the assigned attributes this.state
this.setState({
mess: msg
});
}
// Render
render(){
return (
<React.Fragment>
{/ * Rendering subassembly, the subassembly is provided a method of access,
Method getdata parent component name attribute named subassemblies call * /}
<App getdata={this.getDatas.bind(this)}></App>
<Div> Display Data: {this.state.mess} </ div>
<Son {...this.state}></Son>
</React.Fragment>
);
}
}
// throw out
export default Person;