壹  、了解React传值的数据

 一、 创建组件的方法

    一 . 1  通过function声明的组件特点是:

      1)function创建的组件是没有state属性,而state属性决定它是不是有生命周期。

      2)function没有constructor构造函数,

      3)function的渲染方法是直接调用。

      4)function中不可以用箭头函数

    一 . 2 通过class声明组件的特点:

      1)class组件有state属性,所以class是有声明周期的。

      2)class组件中有constructor构造函数。

      3)class组件通过render方法进行渲染,类需要先实例化再去调用实例化对象上的render方法。

      4)class组件中可以用箭头函数。

 二 、 props属性和state属性

    二 . 1  props属性及用法

        二 . 1 . 1 proprs属性是组件之间用来传递参数的,但是props的数据是不可以修改的。并且function中没有构造器,所以只有porps属性传

               递数据。

        二 . 1 . 2 用法

            {this.props.name}

            (具体用法参   贰、React  中代码)

    二 . 2  state属性以及用法

      二 . 1 . 1  state属性,class声明的组件中有constructor构造函数,可以声明state属性,state属性是class私有的属性,所以值是可以修改的。

      二 . 1 . 2 用法

          {this.state.[name]}

          修改

          {this.setState({ name:值 })}

          (具体用法参   贰、React  中代码)

贰  、React  传值

    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="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

  

一、父组件向子组件传值

      一 . 1  先声明父组件,用来向Son组件传值。

         

//引入React组件
import React from 'react';
//引入React-dom组件
import ReactDOM from 'react-dom';
//引入子组件Son
import Son from './Son'; //声明一个父组件名为Father
class Father extends React.Component{
//类自带的构造函数constructor
constructor(){
//继承React
super();
//声明一个类函数专属的状态state
this.state={
message:"hello,This is my son's data。。。"
}
}
//渲染方法,类组件中必须有的渲染方法。
render(){
//渲染方法中必须有的return 返回值,并且返回值最外层必须是只有一个标签。
return (
//如果页面中不希望有无用的标签,可以用React中自带的<React.Fragment>标签
<React.Fragment>
{/*实例化Son组件并向Son组件传递数据,渲染到页面*/}
<Son mess={this.state.message} />
</React.Fragment>
);
}
} //获取目标元素,并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))

  一 . 2 声明一个Son组件,接受Father组件的数据,并向父组件返回渲染数据。

//引入React
import React from 'react'; //声明一个子组件,名为Son
class Son extends React.Component{
//声明render方法
render(){
//return返回
return(
<React.Fragment>
<h1>这是Son组件</h1>
{/* 调用组件之间传参props 渲染数据到页面 */}
{this.props.mess}
</React.Fragment>
);
}
} //向外暴露自己
export default Son;

二、子组件向父组件传值

    二  .  1  声明一个父组件,名为Father。

        

//引入React组件
import React from 'react';
//引入React-dom组件
import ReactDOM from 'react-dom';
//引入子组件Son
import Son from './Son'; //声明一个父组件名为Father
class Father extends React.Component{
//声明一个类中自带的构造函数
constructor(){
//继承react
super();
//声明一个state状态
this.state={
message:""
}
}
//声明一个用来接收子组件数据的方法
getSonMess(msg){
this.setState({
message:msg
})
}
//渲染方法
render(){
return(
<React.Fragment>
    <h1>这是Father组件</h1>
{/* 实例化子组件 */}
<Son mess={this.getSonMess.bind(this)} />
<hr />
{/* 输出从Son组件中获取的数据 */}
<h1>这是从Son组件中获取的数据</h1>
{this.state.message}
</React.Fragment>
);
}
} //获取目标元素,并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))

  

二  .  2 声明一个子组件Son,向父组件Father传数据

  

import React from 'react';

class Son extends React.Component{
//创建构造函数
constructor(){
super();
//创建数据
this.state={
message:"这是在Son子组件生成的数据。。"
}
}
//创建一个方法用来向父组件传数据
addFatherMess(){
this.props.mess(this.state.message)
} render(){
retrun(
<React.Fragment>
          <h1>这是Son组件</h1>
{/* 绑定一个点击事件,向父组件传数据 */}
<button onClick={this.addFatherMess.bind(this)}>点击获取数据</button>
</React.Fragment>
);
}
} //向外暴露
export default Son;

三、 兄弟相传

  三  .  1  声明一个Father组件,用来接收Son组件的数据,然后发送到Son2组件,并向页面进行渲染

    

//引入react
import React from 'react';
//引入react-dom组件
import ReactDOM from 'react-dom';
//引入 Son 组件
import Son from './Son';
//引入 Son2 组件
import Son2 from './Son2'; //创建一个Father组件
class Father extends React.Component{
//创建构造函数
constructor(){
//继承React
super();
//创建state状态
this.state={
message:""
}
}
//通过getSonMess方法获取子组件参数,并修改this.state.message数据
getSonMess(msg){
this.setState({
message:msg
})
} //声明render方法
render(){
//render方法中必须有一个返回值,是渲染页面的排版,
return (
<React.Fragment>
<h1>这是Father.js</h1>
<hr />
{/* 实例化Son组件,从Son组件获取数据和渲染页面 */}
<Son mess={this.getSonMess.bind(this)}></Son>
<hr />
{/* 实例化Son2组件,向Son2组件传递数据和渲染页面 */}
<Son2 data={this.state.message}></Son2> </React.Fragment>
);
}
} //获取目标元素,并渲染页面
ReactDOM.render(<Father />,document.querySelector(#root))
//

  三 .  2   声明一个Son组件,用来生成数据,然后把数据传递给父组件

//引入react组件
import React from 'react'; //声明一个Son组件,用来向父组件传值
class Son extends React.Component{
//点击事件绑定的函数
sonClick(){
//生成数据,并赋值给参数
this.props.mess("Son里生成的数据")
} render(){
return (
<div>
<h1>这是Son.js</h1>
{/* 通过点击事件绑定,把数据传给父组件 */}
<button onClick={this.sonClick.bind(this)}>Son里的按钮点击获取数据传到Son2.js</button>
</div>
);
}
} //向外暴露自己
export default Son;

  三 .  3  创建一个Son2组件,用来接收Father组件传过来,Son组件给Father组件的数据 .

//引入react
import React from 'react'; //声明一个Son2组件用来接收Father组件接收Son组件的数据
class Son2 extends React.Component{ render(){
return (
<div>
{/* 获取数据并渲染通过props */}
<h1>这是Son2.js</h1>
拿到{this.props.data}
</div>
);
}
} //向外暴露自己
export default Son2;

  

注:以上为个人理解,如若有误,请留言指出。谢谢!

React 组件间传值的更多相关文章

  1. react组件间传值详解

    一.父子组件间传值     <1>父传子         父组件:

  2. React 页面间传值的个人总结

    react 组件之间传值的方案有很多,下面是我个人经验的总结 props 来传递值 传值方式: 通过props 获取值 通过props 提供的func去修改值 优点: 不需要任何第三方的组件,纯rea ...

  3. React 组件间通讯

    React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...

  4. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  5. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  6. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  7. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  8. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  9. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

随机推荐

  1. STL笔试面试题总结(干货)(转)

    STL笔试面试题总结 一.STL有哪些组件? STL提供六大组件彼此此可以组合套用: 1.容器容器就是各种数据结构,我就不多说,看看下面这张图回忆一下就好了,从实现角度看,STL容器是一种class ...

  2. 【串线篇】SpringMvc视图解析

    一. 请求处理方法执行完成后,最终返回一个 ModelAndView 对象.对于那些返回 String,View 或 ModeMap 等类型的处理方法,Spring MVC 也会在内部将它们装配成一个 ...

  3. matlab采用GPU运算

    >>help gpuThere are several options available for using your computer's graphics processing un ...

  4. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  5. MariaDB 建立连接

    与MariaDB建立连接的一种方法是在命令提示符下使用mysql二进制文件. MySQL脚本 查看下面给出的示例. [root@host]# mysql -u root -p Enter passwo ...

  6. Mybatis缓存+配置

    mybatis提供了缓存机制减轻数据库压力,提高数据库性能 mybatis的缓存分为两级:一级缓存.二级缓存 一级缓存是SqlSession级别的缓存,缓存的数据只在SqlSession内有效 二级缓 ...

  7. 内核设备模型从kobject到子系统

                                         内核设备模型 目的:表示设备和设备在系统中的拓扑关系 优点:1减少内核代码量,2可以统一查看所有设备状态和所连接的总线,3可以 ...

  8. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  9. 【软工项目Beta阶段】第10周Scrum会议博客

    第十周会议记录 小组GitHub项目地址https://github.com/ouc-softwareclass/OUC-Market 小组Issue地址https://github.com/ouc- ...

  10. Linux运维学习网站收藏

    Linux运维之道 1>  http://www.linuxidc.com/      //Linux公社,收藏Linux学习的很多知识 2> http://http://www.jb51 ...