创建组件的方法，组件的props属性state属性的用法和特点，父子组件传值，兄弟组件传值(代码片段)

关键词：

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;

reactnative入门组件的props(属性)和state(状态)

...ative中的组件也有属性、样式和状态。1.Props（属性）组件创建时会设置一些参数来定制这个组件，这些参数就是属性，属性一旦设定，在组件的生命周期中就不会改变。下面拿Image的source属性和Text的onPress属性作为举例。Image的s 查看详情

reactnative的props和state的介绍

...his.props 可以通过将属性传递给构造函数constructor来实例化组件，这些属性就叫做props。在组件渲染的时候，可以通过this.props访问该组件的属性。但是不在组件方法里面修改props。 该组件的父元素一般会修改它孩子的属性，然后孩... 查看详情

react组件三大核心属性:state、props、refs

参考技术A2.对props中的属性值进行类型限制和必要性限制3.扩展属性:将对象的所有属性通过props传递4.默认属性值5.组件类的构造函数2.回调形式的ref3.createRef创建ref容器· 查看详情

reactnative知识11-props(属性)与state(状态)

一：Props(属性)大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变通过在不同的场景使用不同的属性... 查看详情

react的props和state(代码片段)

props　　当前组件的组件标签身上的所有属性和子节点构成的集合；　　可以用来组件传递数据，一般用于父子组件之间；　　this.props对象的属性与组件的属性一一对应，但对于组件标签的子节点，this.props.children属性的值有三... 查看详情

react入门---属性(props)-8

Props和State对于组件Component是非常重要的两个属性。区别：State对于模块来说是自身属性；　　 Props对于模块来说是外来属性；同样的，props也是只作用于当前的组件，绝不影响其他组件；给组件 <ComponentFooter>添加props... 查看详情

reactreact全家桶组件+组件三大核心属性state-props-refs+事件处理与条件渲染+列表与表单+状态提升与组合+高阶函数与函数+函数柯里化(代码片段)

文章目录1组件1.1函数组件1.2类式组件2组件三大核心属性state-props-refs2.1state2.1.1关于state的理解2.1.2类式组件中的使用state2.2props2.2.1关于props的理解2.2.2类式组件中使用props2.2.3函数式组件使用props2.2.4props和state的区别2.3refs2.3.1关于pro... 查看详情

react中props和state用法(代码片段)

React中Props和State用法1.本质　　一句话概括，props是组件对外的接口，state是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件... 查看详情

react组件的state(代码片段)

组件state必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变都可以从state的变化中反映出来；同时，state还必须代表一个组件UI呈现的最小状态集，即state中的所有状态都用于反映组件UI的变化，没有任何多余的状态，... 查看详情

react生命周期(代码片段)

概念:在组件创建到加载到页面上运行,以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期触发的时间,统称为组件的生命周期;组件的生命周期分为三部分:组件创建阶段:组件创建阶段的生命周期函数,有一个... 查看详情

react组件通信(代码片段)

...lementById('root'))2、原型方法父组件通过React.createRef()创建Ref，保存在实例属性myRef上。父组件中，渲染子组件时，定义一个Ref属性，值为刚创建的myRef。父组件调用子组件的myFunc函数，传递一个参数，... 查看详情

反应组件错误无法读取未定义的属性

...时间】：2017-05-1218:38:56【问题描述】：我是React新手，我创建了这样的组件；exportdefaultclassCartoviewDrawerextendsReact.Componentconstructor(props)super(props);this.state 查看详情

react之props，及与state的区别

参考技术A组件内可以通过props来获得属性值，看下面的实例先来回顾一下Props最基本的使用：通过以上实例咱们知道通过props可以得到组件MyComponent的属性siteName的值。咱们可以通过为组件类添加defaultProps属性来为props设置默认值... 查看详情

关于props和state（react）

...act的数据模型分为共有数据和私有数据，共有数据可以在组件间进行传递，私有数据为当前组件私有。共有数据在React中使用props对象来调用，它包含标签所有的属性名称和属性值，props对象有三个特性，单向流动性、显示传递性... 查看详情

react的class组件及属性详解！

...t.Component的组件，都必须重写render()方法。React建议：不要创建自定义基类组件，使用组合而非继承的方式写组件。当组件实例被创建并插入DOM中时，调用顺序如下：当组件的props或state发生变化时会触发更新。调用顺序如下：此... 查看详情

reactnative基础

reactnative的两个核心的属性控制改变组件：props和state。props是在父组件中进行设置，只要设置完成那么在组件的生命周期就定死了，不会发生改变。针对数据变化修改的情况，我们需要使用state属性；一般情况下，我们需要在const... 查看详情

reactnative——生命周期

1、创建阶段getDefaultProps：处理props的默认值在react.createClass调用//在创建类的时候被调用　　this.props该组件的默认属性  2、实例化阶段ReactDOM.render(<自定义组件启动后开始实例化getInitialState：初始化组件的state值，其返... 查看详情

react父组件传入的属性没有让子组件收到的prop变化

参考技术Areact父组件传入的属性没有让子组件收到的prop变化如果想要传递子组件的props改变后刷新子组件dom，就要将父组件的state中的值传给子组件，而不是将普通的变量传递给子组件vue更改props的值子组件会刷新，因为vue中传... 查看详情