一 基础

props: 父传子  单向

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; class ParentCom extends React.Component {
constructor(props) {
super(props)
this.state={
isActive: true
} }
render() {
return (
<div>
<button onClick={()=>{this.show()}}> 控制子组件显示或隐藏(有无子组件,,,也可以通过样式来控制)</button>
<ChildCom isActive={this.state.isActive} />
</div>
)
}
show() {
this.setState({
isActive:!this.state.isActive
})
}
} class ChildCom extends React.Component {
constructor(props) {
super(props)
this.state={}
}
render() {
if(this.props.isActive) {
return (
<div>子组件</div>
)
}else {
return null
} }
} ReactDOM.render(
<div>
<ParentCom />
</div>,
document.getElementById('root')
)

子传 父 单向

将子元素的数据传递给父元素,实际上就是 调用父元素的函数,传参进去
class ParentCom extends React.Component {
constructor(props) {
super(props)
this.state={
msg:null
} }
render() {
return (
<div>
<ChildCom setChildData={this.setChildData} />
{ this.state.msg}
</div>
)
}
setChildData=(childData)=>{
this.setState({
msg:childData
})
}
} class ChildCom extends React.Component {
constructor(props) {
super(props)
this.state={
childData:'我是子组件'
}
}
render() {
return (
<div>

<button onClick={this.sendToParent}>点击传值给父组件</button>
      
          <button onClick={()=>this.props.setChildData(this.state.childData)}>直接调用</button>
      </div>
)
}
sendToParent=()=>{
console.log(this.state.childData)
// 将子元素的数据传递给父元素,实际上就是 调用父元素的函数,传参进去
this.props.setChildData(this.state.childData) }
}

react 03 组件传值的更多相关文章

  1. 【React入门】React父子组件传值demo

    公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...

  2. React 多组件传值props和this

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  3. react 父子组件传值

    父组件向子组件传递信息 父组件片段 constructor(props){ super(props) this.state={ message:"我是父组件传来的" } } ren ...

  4. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

  5. React学习笔记(三) 组件传值

    组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...

  6. 使用React.cloneElement()给子组件传值

    React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...

  7. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  8. React组件传值方式总结

    1. 子组件向父组件传值 父组件Header: import Nav from 'Nav.js'; class Header extends React.Component { constructor ...

  9. React 组件传值 父传递儿子

    10===> 传递参数 import React from "react" //一定要导入React // 函数类型去创建组件 export function Web1(pr ...

  10. react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    react 父组件给子组件传参时,父组件直接在引入的子组件内写入要传递的参数即可 <HeaderComponent title={"传递的参数"}></Heade ...

随机推荐

  1. go_xml_learn

    结构体转换为xml: type Person struct { XMLName xml.Name `xml:"person"` Name string `xml:"nam ...

  2. vue3+TS 自定义指令:长按触发绑定的函数

    vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的 ...

  3. [机器学习] t-SNE聚类算法实践指南

    ​  转载于比PCA降维更高级--(R/Python)t-SNE聚类算法实践指南-阿里云开发者社区 作者介绍:Saurabh.jaju2 Saurabh是一名数据科学家和软件工程师,熟练分析各种数据集 ...

  4. electron + go 如何从sqlite获取数据

    我现在的数据在sqlite中,保存在mac本地的一个文件中.用了electron+vue搭建了一个客户端. 我大概希望是这样的逻辑,先加载本地db文件,然后再获取数据. 这里就有一个问题,我怎么获取s ...

  5. 我的基于 JamStack 的新博客

    概述 今天心血来潮,介绍一下我的新博客站点 -- https://EWhisper.cn. 我是做基础平台 PaaS 运维和架构的,挺喜欢把工作中学到的新知识写下来.记笔记,突然有一天就抱着「资源共享 ...

  6. Java线程诊断

    1.诊断CPU占用过高 [root@master ~]# nohup java -jar JvmProject.jar & // 有问题的java程序 [1] 1627 [root@maste ...

  7. AtCoder Regular Contest 148 B - dp

    题面 For a string \(T\) of length \(L\) consisting of d and p, let \(f(T)\) be \(T\) rotated \(180\) d ...

  8. 基于APIView写接口

    一.视图层代码 """ 基于APIView实现接口的编写 用的是同一个模型表 路由也没变 这次做了解耦合 写了序列化类 与视图类分开了 """ ...

  9. mysql 错误解决大法 Specified key was too long; max key length is 767 bytes

    高版本mysql向低版本(5.7以下)导入sql时可能会发生此问题 开启索引最大长度 SET GLOBAL INNODB_LARGE_PREFIX = ON; 将表改为动态表SET GLOBAL in ...

  10. ChatGPT留给知乎、小红书的时间不多了

    大家好啊,今天我打算给大家整点好活!挑战一下用ChatGPT打入各平台内部. 知乎挑战! 首先了解一下"知乎体" 知乎体是以专业知识为基础,以清晰的条理对问题进行阐述,并解决该问题 ...