创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值

最新推荐文章于 2024-08-26 16:28:42 发布

ToDeer

最新推荐文章于 2024-08-26 16:28:42 发布

阅读量239

点赞数 1

分类专栏： React 文章标签： javascript html5 node.js reactjs

本文链接：https://blog.csdn.net/weixin_46031235/article/details/103628846

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

创建组件的方法，组件的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(<User {...obj} ></User>, document.getElementById('root'));
// ReactDOM.render(<Person name={obj.name} age={obj.age} sex={obj.sex} ></Person>, document.getElementById('root'));
ReactDOM.render(<Person {...obj} ></Person>, document.getElementById('root'));

函数组件

//函数组件

//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;