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

Posted 2021-03-21 jiazhaolong

 

 

1.创建组件的方法   函数组件   class组件

  1.1 函数组

无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类，通过函数形式或者 `ES6` 箭头 `function`的形式在创建，并且该组件是无state状态的。具体的创建形式如下

 1 import React from ‘react ‘;
 2 
 3 //定义一个React组件
 4 function App() {
 5   return (
 6     <div>
 7       hello React...
 8     </div>
 9   );
10 }
11 
12 export default App;

  1.1 class组件

`React.Component` 是以 `ES6` 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 `React.Component` 形式如下

 

 1 import React from ‘react‘;
 2 
 3 //定义一个React组件
 4 class App extends React.Component{
 5   render(){
 6     return (
 7       <div>
 8         Hello，Reactjs！！
 9       </div>
10     );
11   }
12 }
13 
14 export default App;

 

 

1 在其他文件中引用组件
2 
3 
4 import React from ‘react‘;
5 import ReactDOM from ‘react-dom‘;
6 //App组件，组件要求大写字母开头
7 import App from ‘./App‘;
8 
9 ReactDOM.render(<App />, document.getElementById(‘root‘));

 

2.组件的props属性

    2.1  概念 :react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

2.2    `props`属性的特点

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

 

  2.3  代码示例 

使用函数组件：

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 
 4 //使用函数组件
 5 function User(props){
 6     //在组件中获取props属性值
 7     return <div>{props.name}，{props.age}</div>
 8 }
 9 
10 //定义数据
11 const person ={
12     name:‘张三‘,
13     age:20,
14     sex:‘男‘
15 }
16 
17 ReactDOM.render(
18     <User {...person}></User>
19 , document.getElementById(‘root‘));

 

    使用类组件：

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 
 4 //使用class组件
 5 class User extends React.Component{
 6     render(){
 7         return (
 8     <div>{this.props.name}--{this.props.age}</div>
 9         );
10     }
11 }
12 
13 //数据
14 const person ={
15     name:‘张三‘,
16     age:20,
17     sex:‘男‘
18 }
19 
20 ReactDOM.render(
21     <User {...person}></User>
22 , document.getElementById(‘root‘));

 

3.state属性的用法和特点

3.1

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

 

3.2代码示例：

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 
 4 class Person extends React.Component{
 5     //构造方法
 6     constructor(){
 7         super();
 8         this.state = {
 9             name: ‘tom‘
10         }
11     }
12 
13     render(){
14         //state属性是可修改的
15         this.state.name = ‘jack‘;
16         return (
17         <h1>{this.state.name}</h1>
18         );
19     }
20 }
21 
22 ReactDOM.render(<Person />, document.getElementById(‘root‘));

 

4.父子组件传值

4.1父组件传值子组件

     在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到      这个param的值。

     父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。

 

    代码如下- 父组件代码片段：

 1 constructor(props){
 2     super(props)
 3     this.state={
 4       message:"i am from parent"
 5     }
 6   }
 7   render(){
 8     return(
 9           <Child txt={this.state.message}/>
10     )
11   }
12 }

   子组件代码片段：

1 render(){
2     return(
3           <p>{this.props.txt}</p>
4     )
5 }

  完整示例：创建父组件index.js

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 import User from ‘./User‘;//引入子组件
 4 
 5 //定义数据
 6 const person = {
 7     name: ‘Tom‘,
 8     age:20
 9 }
10 
11 ReactDOM.render(
12     //渲染子组件，并向子组件传递name,age属性
13     <User name={person.name} age={person.age}></User>
14     , document.getElementById(‘root‘));

 

创建子组件 :User.js

 1 import React from ‘react‘;
 2 
 3 class User extends React.Component{
 4     render(){
 5         return (
 6             // 使用props属性接收父组件传递过来的参数
 7             <div>{this.props.name}，{this.props.age}</div>
 8         );
 9     }
10 }
11 
12 export default User;

 

 

5.兄弟组件传值

兄弟组件之间的传值，是通过父组件做的中转 ，流程为：

**组件A** -- `传值` --> **父组件** -- `传值` --> **组件B**

   代码示例：创建Aclis.js 组件,用于提供数据

 1 import React from ‘react‘;
 2 
 3 class Acls extends React.Component {
 4     //按钮点击事件，向父组件Pcls.js传值
 5     handleClick(){
 6         this.props.data("hello...React...");
 7     }
 8 
 9     render(){
10         return (
11             <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>
12         );
13     }
14 }
15 
16 export default Acls;

 

创建父组件 `Pcls.js` 用于中转数据

 1 import React from ‘react‘;
 2 import Acls from ‘./Acls‘;
 3 import Bcls from ‘./Bcls‘;
 4 
 5 class Pcls extends React.Component {
 6     //构造函数
 7     constructor(){
 8         super();
 9         this.state = {
10             mess: ‘‘
11         }
12     }
13     //向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值
14     getDatas(data){
15         this.setState({
16             mess: data
17         });
18     }
19 
20     render(){
21         return (
22             <React.Fragment>
23                 Pcls组件中显示按钮并传值：
24                 <Acls data={this.getDatas.bind(this)}></Acls>
25                 <Bcls mess={this.state.mess}></Bcls>
26             </React.Fragment>
27         );
28     }
29 }
30 
31 export default Pcls;

 

创建子组件 `Bcls.js` 用于展示从 `Acls.js` 组件中生成的数据

 1 import React from ‘react‘;
 2 
 3 class Bcls extends React.Component {
 4 
 5     render(){
 6         return (
 7             <div>在Bcls组件中展示数据：{this.props.mess}</div>
 8         );
 9     }
10 }
11 
12 export default Bcls;