React条件渲染、列表渲染和组件传值

React中实现v-show

父组件

import React from "react";
import Child4 from "./components/Child4"
// 用react实现vue中v-show
class App extends React.Component{constructor(props) {super(props)this.state = {flag:true}}toggleFn = () => {this.setState({flag:!this.state.flag})}render() {return (<div><button onClick={this.toggleFn}>点击切换toggle</button><h1 style={{ display: this.state.flag ? 'block' : 'none' }}>显示</h1><Child4 v-show={this.state.flag}></Child4></div>)}
}
export default App

子组件

//类组件写法
import React from "react";
export default class App extends React.Component{constructor(props) {super(props)this.state = {}}render() {return (<div style={{display:this.props['v-show']?'block':'none'}}><h3>我是child4组件</h3></div>)}
}//函数组件
export const Child3 = (props) => {
//props['v-show'],因为react中不支持带-的写法，无法直接props.v-showreturn (<div style={{display:props['v-show']?'block':'none'}}> <h1>我是子组件{ props.name }</h1></div>)
}

React中实现v-if

React中的条件渲染就是v-if

class App4 extends React.Component {constructor(props) {super(props);this.state = {isLoggedIn: true};}render() {let { isLoggedIn } = this.state;//falselet AuthButton;if (isLoggedIn) {AuthButton = <button>Logout</button>;} else {AuthButton = <button>Login</button>;}return (<div className="App">{AuthButton}</div>);}
}

React中实现组件传值

父传子

【步骤】

父组件提供要传递的 state 数据

给子组件标签添加属性，值为 state 中的数据

子组件中通过 props 接收父组件中传递的数据
函数组件通过参数 props 接收数据

类组件通过 this.props 接收数据

props 是只读的，不允许修改 props 的数据

//父组件
import React from "react";
import Child2 from "./components/Child2"
export default class App extends React.Component{constructor(props) {super(props)this.state = {name:'Bob'}}render() {return (<div><h1>父组件</h1><Child2 name={this.state.name} ></Child2></div>)}
}//子组件
import React from "react";
export defaultclass App extends React.Component{constructor(props) {super(props)this.state = {}}render() {return (<div><h3>{this.props.name}</h3></div>)}}

子传父

【步骤】

父组件提供一个回调函数（用于接收数据）

将该函数作为属性的值，传递给子组件

子组件通过 props / this.props 调用回调函数

将子组件的数据作为参数传递给回调函数

//子组件
import React from "react";
export defaultclass App extends React.Component{constructor(props) {super(props)this.state = {  }}//子传递给父组件，通过回调函数传值childrenFn = () => {this.props.getMsg('梅西')}render() {return (<div><button onClick={ this.childrenFn }> 子组件button </button></div>)}}//父组件
import React from "react";
import Child2 from "./components/Child2"
export default class App extends React.Component{constructor(props) {super(props)this.state = {}}//通过回调函数接收子组件传递过来的值getChildMsg = (msg) => {console.log('子传给父的值',msg);}render() {return (<div><h1> 父组件 </h1><Child2 getMsg = { this.getChildMsg }></Child2></div>)}
}

兄弟传值

【步骤】

父组件提供一个回调函数（用于接收数据）

将该函数作为属性的值，传递给子组件

子组件通过 props / this.props 调用回调函数

将子组件的数据作为参数传递给回调函数

父组件在回调函数中把参数赋值给 state 中状态值

父组件中把状态值作为属性值传递给另外一个子组件

另外一个子组件通过 props / this.props 接收

// 兄弟组件之间的传值
const Brother1 = (props) => {return (<h1>计数器：{props.count }</h1>)
}const Brother2 = (props) => {return (<button onClick={props.AddNum}>点击+1</button>)
}class Counter extends React.Component{constructor(props) {super(props)this.state = {count:0}}AddNum = () => {this.setState({count:this.state.count+1})}render() {return (<div><Brother1 count={this.state.count}></Brother1><Brother2 AddNum={this.AddNum}></Brother2></div>)}
}

跨组件传值

【步骤】

调用 React.createContext() 创建 Provider（提供数据）和 Consumer（消费数据）两个组件。

使用 Provider 组件作为父节点

设置 value 属性，表示要传递的数据

调用 Consumer 组件接收数据。

//跨组件传值
const { Provider, Consumer } = React.createContext()
class App14 extends React.Component {render() {return (<Provider value={{a:'cluo',b:'meixi'}}><div>我是APP2<Child11 /></div></Provider>)}
}const Child11 = props => {return (<div><h1>我是child11</h1><Consumer>{data111=><h1>我是child12 -- {data111.a }</h1>}</Consumer><Child12 /></div>)
}const Child12 = props => {return (<div>我是child12<Consumer>{data111=><h1>我是child12 -- {data111.b }</h1>}</Consumer></div>)
}

React条件渲染、列表渲染和组件传值相关推荐

[react] react怎么提高列表渲染的性能？
[react] react怎么提高列表渲染的性能? 使用webpack 做代码分割. 使用hooks. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
【Vue】基础（三）条件渲染 - 列表渲染(key的作用与原理虚拟DOM解析) - 收集表单数据 - 持续更新中
目录 11. 条件渲染 11.1 v-if 11.2 v-show 12. 列表渲染 12.1 v-for(基本列表使用) 12.2 key的作用与原理真实DOM和其解析流程虚拟 DOM 的好处 ...
【React系列教程五】父子组件传值、defaultProps和propTypes
一.父组件给子组件传值(即子组件调用父组件数据和方法) 1.在调用子组件的时候,定义一个属性 <Header msg='首页'></Header> 2.子组件中通过 this ...
React 第八章列表渲染以及key的使用
在页面中list是较为常见的一种页面展示方式,在React中我们可以通过数组map函数以及其他循环语句实现jsx数组在页面组件的大括号{}中进行展示. 1,将数组进行循环展示如下,使用Array.m ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...

React条件渲染、列表渲染和组件传值

React中实现v-show

React中实现v-if

React中实现组件传值

【步骤】

【步骤】

【步骤】

【步骤】

React条件渲染、列表渲染和组件传值相关推荐

最新文章

热门文章