创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值。
一，创建组件的方法
1.1.创建组件的方法有函数组件和类组件。
1.2.组建的使用。
引入组件 import 组件名 from './组件名'
<组件名 />
二，组件的props属性
示例：
- 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="description" content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- js页面
import React from 'react';
import ReactDOM from 'react-dom';
//引入组件
import Person from './Person';
import User from './User'
//模拟AJAX请求
var obj = {
name:'tom',
age:10,
sex:'男'
}
// ReactDOM.render(- 函数组件
//函数组件
//1.引入React模块
import React from 'react';
//2.声明函数
function User(props){
return (
<div>
<p>User展示：{props.name}，{props.age}，{props.sex}</p>
<h1>
{props.mystr}
</h1>
</div>
);
}
//3.向外暴露
export default User;
- 类组件
//创建类组件
//1.引入React模块
import React from 'react';
import User from './User';
//2.声明类，要继承React.Component
class Person extends React.Component{
//3.重写渲染方法
render(){
return (
<div>
<p>Person展示：{this.props.name}，{this.props.age}，{this.props.sex}</p>
<User mystr='hahahaha'></User>
</div>
);
}
}
//4.向外暴露
export default Person;
1.1.props属性
- 先在组件上通过自定义属性赋值。
- 函数组件中，在函数上定义形参props，在函数中 props.属性名。
- 类组件中，通过 this.props.属性名。
1.2.props的作用
- 用于组件之间传值。
1.3.props的特点
- 只读，值不能被修改。
三，state属性的用法和特点
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
示例：
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state属性是可修改的
this.state.name = 'jack';
return (
<h1>{this.state.name}</h1>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
总结：props和state属性的区别
- props中的数据都是外界传递过来的
- state中的数据都是组件私有的（通过Ajax获取回来的数据，一般都是私有数据）
- props中的数据都是只读的，不能重新赋值
- state中的数据，都是可读可写的
- 子组件只能通过props传递数据
四，父子组件传值
1.父传子
- 父组件js
// 父传子 父组件
// 创建组件
//1.引入React模块
import React from 'react';
import Son from './Son';
//2.声明类，要继承React.Component
class Father extends React.Component{
render(){
return(
<React.Fragment>
<Son mess='fuchuanzi'></Son>
</React.Fragment>
)
}
}
//3.向外暴露
export default Father;
- 子组件
// 父传子 子组件
// 创建组件
import React from 'react';
//2.声明类，要继承React.Component
class Son extends React.Component{
//3.重写渲染方法
render(){
return(
<React.Fragment>
{this.props.mess};
</React.Fragment>
)
}
}
//4.向外暴露
export default Son;
- 效果
2.子传父
- 父组件js
//子传父
//1.引入React模块
import React from 'react';
import Son from './Son';
//声明类，要继承React.Component
class Father extends React.Component{
constructor(){
super();
this.state={
message:''
}
}
// 声明一个函数，用户接收子组件的传值
getSonMess(msg){
console.log('子组件传过来的值：'+msg);
}
// 重写渲染方法
render(){
return (
<React.Fragment>
<Son mess={this.getSonMess} />
</React.Fragment>
);
}
}
//向外暴露
export default Father;
- 子组件
// 子传父
//1.引入React模块
import React from 'react';
// 2.声明类，要继承React.Component
class Son extends React.Component{
//3.重写渲染方法
render(){
return (
<React.Fragment>
{this.props.mess(123)}
</React.Fragment>
)
}
}
//4.向外暴露
export default Son;
-
效果
五，兄弟组件传值 -
父组件js代码
// 兄弟相传
//1.引入React模块
import React from 'react';
import Son1 from './Son1';
import Son2 from './Son2';
//2.声明类，要继承React.Component
class Father extends React.Component{
constructor(){
super();
this.state={
message:""
}
}
// 这个函数用来接收Son1.js组件的数据函数
Son1data(msg){
this.setState({
message:msg,
})
}
//3.重写渲染方法
render(){
return(
<React.Fragment>
<Son1 Son1data={this.Son1data.bind(this)} ></Son1>
<Son2 mess={this.state.message}></Son2>
</React.Fragment>
)
}
}
//4.向外暴露
export default Father;
- 子组件1的js代码
//1.引入React模块
import React from 'react';
// Son1子组件
//2.声明类，要继承React.Component
class Son1 extends React.Component{
//按钮点击事件函数
Son1click(){
this.props.Son1data('这是从Son.js中生成的数据');
}
//3.重写渲染方法
render(){
return(
<React.Fragment>
<button onClick={this.Son1click.bind(this)}>Son1.js数组中获取的数据</button>
</React.Fragment>
)
}
}
//4.向外暴露
export default Son1;
- 子组件2的js代码
//1.引入React模块
import React from 'react';
//2.声明类，要继承React.Component
class Son2 extends React.Component{
//3.重写渲染方法
render(){
return(
<React.Fragment>
{this.props.mess}
{console.log(this.props.mess)}
</React.Fragment>
)
}
}
//4.向外暴露
export default Son2;
- 效果
点击button的时候console.log子组件里的数据
以上是我对组件的认知如有异议，请指出。