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

时间：2021-08-11 07:48:26

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

1.1 函数组

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

 import React from 'react ';

 //定义一个React组件

 function App() {

   return (

     <div>

       hello React...

     </div>

   );

 }

 export default App;

1.1 class组件

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

 import React from 'react';

 //定义一个React组件

 class App extends React.Component{

   render(){

     return (

       <div>

         Hello，Reactjs！！

       </div>

     );

   }

 }

 export default App;
 在其他文件中引用组件

 import React from 'react';

 import ReactDOM from 'react-dom';

 //App组件，组件要求大写字母开头

 import App from './App';

 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  代码示例

使用函数组件：

 import React from 'react';

 import ReactDOM from 'react-dom';

 //使用函数组件

 function User(props){

     //在组件中获取props属性值

     return <div>{props.name}，{props.age}</div>

 }

 //定义数据

 const person ={

     name:'张三',

     age:,

     sex:'男'

 }

 ReactDOM.render(

     <User {...person}></User>

 , document.getElementById('root'));

使用类组件：

 import React from 'react';

 import ReactDOM from 'react-dom';

 //使用class组件

 class User extends React.Component{

     render(){

         return (

     <div>{this.props.name}--{this.props.age}</div>

         );

     }

 }

 //数据

 const person ={

     name:'张三',

     age:,

     sex:'男'

 }

 ReactDOM.render(

     <User {...person}></User>

 , document.getElementById('root'));

3.state属性的用法和特点

3.1

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

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

3.2代码示例：

 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'));

4.父子组件传值

4.1父组件传值子组件

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

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

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

 constructor(props){

     super(props)

     this.state={

       message:"i am from parent"

     }

   }

   render(){

     return(

           <Child txt={this.state.message}/>

     )

   }

 }

子组件代码片段：

 render(){

     return(

           <p>{this.props.txt}</p>

     )

 }

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

 import React from 'react';

 import ReactDOM from 'react-dom';

 import User from './User';//引入子组件

 //定义数据

 const person = {

     name: 'Tom',

     age:

 }

 ReactDOM.render(

     //渲染子组件，并向子组件传递name,age属性

     <User name={person.name} age={person.age}></User>

     , document.getElementById('root'));

创建子组件 :User.js

 import React from 'react';

 class User extends React.Component{

     render(){

         return (

             // 使用props属性接收父组件传递过来的参数

             <div>{this.props.name}，{this.props.age}</div>

         );

     }

 }

 export default User;

5.兄弟组件传值

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

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

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

 import React from 'react';

 class Acls extends React.Component {

     //按钮点击事件，向父组件Pcls.js传值

     handleClick(){

         this.props.data("hello...React...");

     }

     render(){

         return (

             <button onClick={this.handleClick.bind(this)}>Acls组件中获取数据</button>

         );

     }

 }

 export default Acls;

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

 import React from 'react';

 import Acls from './Acls';

 import Bcls from './Bcls';

 class Pcls extends React.Component {

     //构造函数

     constructor(){

         super();

         this.state = {

             mess: ''

         }

     }

     //向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值

     getDatas(data){

         this.setState({

             mess: data

         });

     }

     render(){

         return (

             <React.Fragment>

                 Pcls组件中显示按钮并传值：

                 <Acls data={this.getDatas.bind(this)}></Acls>

                 <Bcls mess={this.state.mess}></Bcls>

             </React.Fragment>

         );

     }

 }

 export default Pcls;

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

 import React from 'react';

 class Bcls extends React.Component {

     render(){

         return (

             <div>在Bcls组件中展示数据：{this.props.mess}</div>

         );

     }

 }

 export default Bcls;

相关文章