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

1、react组件

1.1、创建组件的方法

  1.1.1、函数组件

  定义一个组件最简单的方式是使用JavaScript函数

function fn(props){
return <h1>Hello,{props.name}</h1>;
}
该函数是一个React组件,它接收一个单一的 " props " 对象并返回了一个React 元素。我们之所以称这种类型的组件为函数组件

  1.1.2、类组件

//引入react模块
import React from 'react';
//声明子组件son
class R extends React.Component {//重写方法render
render() {
return (
// 模板字串
<React.Fragment>
{/* jsx */}
          <h1>hello,{props.name}</h1> 
</React.Fragment>
);
}
}

1.2组件的props属性

  先在组件上通过自定义属性赋值

  函数组件中,在函数上定义形参props,在函数中 props.属性名

function name(props) {
console.log(props)//输出‘Tom’
}

  类组件中,通过 this.props.属性名

class Rea extends React.Component {
render() {
return (
<React.Fragment>
{console.log(this.props.name)}
{/* 输出’Tom‘ */}
</React.Fragment>
);
}
}

作用:在组件之间进行传值

特点:无论是使用函数或是类来声明一个组件,它不能修改它自己的props值。是只可读不可写

1.3组件的state属性

  state的使用

//引入react模块
import React from 'react'
class Act extends React.Component {
constructor(){
super()
this.state={
name:'lxr'
}
}
render() {
return (
<React.Fragment>
{console.log(this.state.name)}
{/* 这里输出name值为’lxr‘ */}
</React.Fragment>
);
}
}

  通过修改状态来更改name值

//引入react模块
import React from 'react'; class Act extends React.Component {
constructor(){
super()
this.state={
name:'lxr'
}
}
update(){
//重新设置name值
this.setState({
name:'rlh'
})
}
render() {
return (
<React.Fragment>
{/* 这里绑定事件 */}
<button onClick={this.update.bind(this)} >点击</button>
{console.log(this.state.name)}
</React.Fragment>
);
}
}

  state是组件内独有的,外部无法向内部传递state,也无法直接改变state的值

而改变state是使用React组件基类中的一个自带函数:

this.setState({
...
});

  使用这个函数之前一定要注意this的作用域,箭头函数中的this指向外部this,而普通函数中的this指向函数本身

 

2、react传值

2.1、父传子

//引入react模块
import React from 'react';
//引入Son模块
import Son from './Son'; //声明父组件father
class Father extends React.Component {
//父类方法render
render() {
return (
<React.Fragment>
{/* 使用子模块Son 并把mess传给子组件,方法名为mess */}
<Son mess='父组件传来的' />
</React.Fragment>
);
}
} export default Father;
//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component { //子类方法render
render() {
return (
<React.Fragment>
{/* 用构造方法里的props来调父组件传来的mess */}
{console.log(this.props.mess)}
</React.Fragment>
);
}
}
//向外暴露
export default Son

  子组件输出父组件传来的值

2.2、子传父

//引入react模块
import React from 'react';
//引入Son模块
import Son from './Son'; //声明父组件father
class Father extends React.Component {
//父组件的father方法
father(msg){
console.log(msg)
} //父类方法render
render() {
return (
<React.Fragment>
{/* 使用子模块Son 把父组件的father方法传给子组件*/}
<Son father= {this.father.bind(this)} />
</React.Fragment>
);
}
}
//向外暴露
export default Father;
//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component { //子类方法render
render() {
return (
<React.Fragment>
{/* 调用父组件传来的father方法 */}
{this.props.father('来自子组件传来的数据')}
</React.Fragment>
);
}
}
//向外暴露
export default Son

父组件输出子组件传来的值

2.3、兄弟相传

  • 父组件
//引入react模块
import React from 'react';
//引入Son模块
import Son from './Son';
//引入Son0模块
import Son0 from './Son0'; //声明父组件father
class Father extends React.Component {
constructor(){
super()
//给state定义mess为空值
this.state={
mess:''
}
}
//父组件的father方法
father(msg){
//控制台输出子组件传来的数据
// console.log(msg)//输出:来自son的数据
//给状态里的mess设置值
this.setState({
mess:msg
})
} //父类方法render
render() {
return (
<React.Fragment>
{/* 使用子模块Son 把父组件的father方法传给子组件*/}
<Son father= {this.father.bind(this)} />
{/* 把子组件son传来的值再传给子组件son0 */}
<Son0 mess={this.state.mess} />
</React.Fragment>
);
}
}
//向外暴露
export default Father;
  • 子组件1
//引入react模块
import React from 'react';
//声明子组件son
class Son extends React.Component {
//子组件的son方法
son(){
//使用father传来的方法,并返回数据
this.props.father('来自son的数据')
}
//子类方法render
render() {
return (
<React.Fragment>
{/* 绑定click时间点击的时候调用son方法 */}
<button onClick={this.son.bind(this)}>来自子组件的按钮</button>
</React.Fragment>
);
}
}
//向外暴露
export default Son
  • 子组件2
//引入react模块
import React from 'react';
//声明子组件son0
class Son0 extends React.Component {
//子类方法render
render() {
return (
<React.Fragment>
{console.log(`我是Son0 这是:${this.props.mess}`)}
</React.Fragment>
);
}
} export default Son0;

当我点击button按钮的时候

son0.js输出来自son.js的数据

      

       

     

  

React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值的更多相关文章

  1. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  2. ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

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

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  4. React中props和state相同点和不同点

    朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...

  5. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  6. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  7. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

  8. react 中子组件调用父组件的方法

    1.在父组件中定义方法,并绑定在子组件上 // 在子组件中调用父组件中的方法 import React,{Component} from 'react'; import Child from './c ...

  9. React创建组件的不同方式(ES5 & ES6)

    一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML eleme ...

随机推荐

  1. Ubuntu下SVN客户端RapidSVN

    Window下我们使用TortoiseSVN,可以很方便地进行查看.比较.更新.提交.回滚等SVN版本控制操作.在Linux下,我们可以使用rapidsvn. RapidSVN是一款不错的SVN客户端 ...

  2. python__系统 : 线程池

    参考文档: https://www.jianshu.com/p/b9b3d66aa0be 使用  ThreadPoolExecutor  类,  as_completed 是迭代器, 如果有任务执行完 ...

  3. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  4. 数据库IN查询参数化改造的方法

    // 批量查询的 2019-05-14 if (!string.IsNullOrWhiteSpace(Request["userCodes"])) { string userCod ...

  5. v-bind 属性绑定

    1.v-bind:title="title" 绑定谁和谁绑定. 2.v-bind:title="title" 简写::title="title&quo ...

  6. Qt之Q_PROPERTY宏理解

    在初学Qt的过程中,时不时地要通过F2快捷键来查看QT类的定义,发现类定义中有许多Q_PROPERTY的东西,比如最常用的QWidget的类定义: Qt中的Q_PROPERTY宏在Qt中是很常用的,那 ...

  7. docker 部署mysql redis

    先介绍利用的两个数据卷挂载的规则,这对于理解挂载mysql数据库存储非常有帮助. 如果挂载一个空的数据卷到容器中的一个非空目录中,那么这个目录下的文件会被复制到数据卷中. 如果挂载一个非空的数据卷到容 ...

  8. 串口 PLC 编程FAQ

    1. 不要频繁打开关闭串口,这是个耗时的过程,如果多个工位都争夺串口资源,则会出现卡顿,死锁. 2. PLC 的读写估计100毫秒,如果并发的写,有的写操作会失败,需要Delay或重试. 3. 通常一 ...

  9. Redis 分布式锁的正确打开方式

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  10. 【Spring Cloud】Spring Cloud之自定义@SpringCloudProfile注解实现@Profile注解的功能

    一.为什么会想到定义@SpringCloudProfile这样的注解 首页提一下@Profile注解:它主要用与Spring Boot多环境配置中,指定某个类只在指定环境中生效,比如swagger的配 ...