React 详解，组件，条件渲染

2024-05-30 06:23:49

安装使用React，（npm，webpack）

命令：

npx create-react-app my-app
cd my-app
npm start

安装教程，可以参考菜鸟教程 React安装还有介绍目录

jsx，动态设置，react的className

一方法（拼接）
<div className={ "flexct" + this.state.mycantact}></div>该方法报的警告
./src/Components/head.js
Line 21:  Unexpected string concatenation of literals  no-useless-concat

字符传拼接，会有警告

二方法.
<div className={this.state.contant ? 'flexfs displaynone' : 'flexfs' }>{listItems}</div>

三目运算符没有报错

.组件封装，引入

组件更加详细用法说明请看：https://blog.csdn.net/weixin_41487694/article/details/103125518

1.定义组件（两种方法：函数定义，es6的class定义）

创建组件，新建一个js文件 header.js

使用函数定义

function Header（）{return <h1>我是页面头部</h1>;
}

使用es6的class定义

class Header extends React.Component {render() {return <h1>我是头部</h1>;}
}

2.使用组件

在index.js这个页面使用

<Header></Header>

3.引入组件

import Head form ‘../header.js’

4.组件之间的传参（props）

父组件传子组件

需要在index.js页面中 <Header></Header> 上加入<Header name=‘我是参数张三’></Header> （name这个时可以自定义的）

还可以这样写 <Headercontact='我是参数张三'></Header>

需要在header.js的文件中进行接参

function Header（props）{return <h1>{props.name}</h1>;
}

子组件传父组件

在父组件中添加监测事件Getprops，

<Header Getprops={this.navclicl} name='headerbg' contact='true'></Header>

子组件中可以绑定事件，触发后进行传入父组件中

    navmobileclick =()=>{this.props.Getprops('参数')}

更简单的写法

 <div onClick={()=>that.props.Getprops('参数')}>点我向父组件传参</div>

条件渲染 React

&&符号（如果this.props.topinfo.subhead 为真，渲染div。其中his.props.topinfo.subhead 为引入组件时传入的参数）

{ this.props.topinfo.subhead &&<div className='navtop'></div>
}

三目运算符（同理this.props.bgcolor 为引入组件时传入的参数）

{this.props.bgcolor === 'grey' ? (<div className='svg-wave-grey'></div>
) : (<div className='svg-wave-white'></div>
)}

React 详解，组件，条件渲染相关推荐

[react] 如何提高组件的渲染效率呢？
[react] 如何提高组件的渲染效率呢? 类组件: 1.继承PureComponent 2.使用shouldComponentUpdate优化函数组件: 1.memo模拟PureComponent ...
python 条件语句实例_详解python 条件语句和while循环的实例代码
详解python 条件语句和while循环的实例代码,逻辑,布尔,值为,结束,语句详解python 条件语句和while循环的实例代码易采站长站,站长之家为您整理了详解python 条件语句和wh ...
设计规范 | 详解组件控件结构体系
设计规范 | 详解组件控件结构体系 2018年4月16日luodonggan 什么是控件?什么组件?两者的区别是什么? Control翻译为控件,Component翻译为组件. 通俗的解释说法就是组件 ...
React 第七章条件渲染
根据条件渲染不同组件,可以实现组件的显示与隐藏. 第一种:在函数内部通过属性props条件的判断,返回不同的组件,进行控制显示隐藏.如果返回null则表示不展示隐藏. //1,条件渲染 functio ...
React:Conditional Rendering（条件渲染）
就像JS中常常会根据条件(比如if/else.switch)返回不同的值,React中也可以根据组件的状态或其他参考条件返回不同的React Element. 比如根据用户是否登陆渲染对应的UI面板. ...
react减少子组件重复渲染的优化方法
背景: 子组件传递两个属性,一个是数据属性useInfo,一个是函数属性onChange 当父组件的number更新之后,子组件虽然不依赖number,但仍旧被强制更新. 优化方案: 1.类组件处理: ...
3dvary灯光材质为什么不亮_详解CG灯光渲染师的职业技能
大家好,我是旺仔,一名游荡影视动画多年的灯光渲染师,昨天直播讲到了灯光师是什么,需要掌握什么技能等等.今天我用文章的形式呈现给大家. 灯光渲染师是什么职位简单来说,CG灯光师就是用三维软件中的灯光来完 ...
spring mvc DispatcherServlet详解之四---视图渲染过程
整个spring mvc的架构如下图所示: 现在来讲解DispatcherServletDispatcherServlet的最后一步:视图渲染.视图渲染的过程是在获取到ModelAndView后的过程 ...
Java线程详解(16)-条件变量
条件变量是Java5线程中很重要的一个概念,顾名思义,条件变量就是表示条件的一种变量.但是必须说明,这里的条件是没有实际含义的,仅仅是个标记而已,并且条件的含义往往通过代码来赋予其含义. 这里的条件和 ...
android verticalviewpager 下拉刷新上拉加载_设计规范 | 详解组件控件结构体系：加载类...
设计师在进行APP设计时,往往会更加专注于界面的布局.界面和界面之间怎么跳转.操作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计.那么我们怎么处理好界面交互中的加载设计,保证体验无缝 ...

最新文章

热门文章