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>
一 . 1 先声明父组件，用来向Son组件传值。
//引入React组件
import React from ‘react‘;
//引入React-dom组件
import ReactDOM from ‘react-dom‘;
//引入子组件Son
import Son from ‘./Son‘;
//声明一个父组件名为Father
class Father extends React.Component{
//类自带的构造函数constructor
constructor(){
//继承React
super();
//声明一个类函数专属的状态state
this.state={
message:"hello,This is my son‘s data。。。"
}
}
//渲染方法，类组件中必须有的渲染方法。
render(){
//渲染方法中必须有的return 返回值，并且返回值最外层必须是只有一个标签。
return (
//如果页面中不希望有无用的标签，可以用React中自带的<React.Fragment>标签
<React.Fragment>
{/*实例化Son组件并向Son组件传递数据，渲染到页面*/}
<Son mess={this.state.message} />
</React.Fragment>
);
}
}
//获取目标元素，并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))
一 . 2 声明一个Son组件，接受Father组件的数据，并向父组件返回渲染数据。
//引入React
import React from ‘react‘;
//声明一个子组件，名为Son
class Son extends React.Component{
//声明render方法
render(){
//return返回
return(
<React.Fragment>
<h1>这是Son组件</h1>
{/* 调用组件之间传参props 渲染数据到页面 */}
{this.props.mess}
</React.Fragment>
);
}
}
//向外暴露自己
export default Son;
二 . 1 声明一个父组件，名为Father。
//引入React组件
import React from ‘react‘;
//引入React-dom组件
import ReactDOM from ‘react-dom‘;
//引入子组件Son
import Son from ‘./Son‘;
//声明一个父组件名为Father
class Father extends React.Component{
//声明一个类中自带的构造函数
constructor(){
//继承react
super();
//声明一个state状态
this.state={
message:""
}
}
//声明一个用来接收子组件数据的方法
getSonMess(msg){
this.setState({
message:msg
})
}
//渲染方法
render(){
return(
<React.Fragment>
<h1>这是Father组件</h1>
{/* 实例化子组件 */}
<Son mess={this.getSonMess.bind(this)} />
<hr />
{/* 输出从Son组件中获取的数据 */}
<h1>这是从Son组件中获取的数据</h1>
{this.state.message}
</React.Fragment>
);
}
}
//获取目标元素，并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))
二 . 2 声明一个子组件Son,向父组件Father传数据
import React from ‘react‘;
class Son extends React.Component{
//创建构造函数
constructor(){
super();
//创建数据
this.state={
message:"这是在Son子组件生成的数据。。"
}
}
//创建一个方法用来向父组件传数据
addFatherMess(){
this.props.mess(this.state.message)
}
render(){
retrun(
<React.Fragment>
<h1>这是Son组件</h1>
{/* 绑定一个点击事件，向父组件传数据 */}
<button onClick={this.addFatherMess.bind(this)}>点击获取数据</button>
</React.Fragment>
);
}
}
//向外暴露
export default Son;
原文：https://www.cnblogs.com/xiaobu-wu/p/12071604.html