首页 > 其他分享 >React学习笔记08- 组件的样式

React学习笔记08- 组件的样式

时间:2023-10-19 10:57:28浏览次数:36  
标签:行内 样式 08 js React 组件 class

1.使用行内样式

想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现:
// 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>
行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方,例如 render 函数里、组 件原型上、外链js文件中

2.使用class

React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体 其实我们大多数情况下还是大量的在为元素添加类名,但是需要注意的是, class 需要写成 className (因为毕竟是在写类js代码,会收到js规则的现在,而 class是关键字)
<p className="hello">Hello world</p>

 

 

标签:行内,样式,08,js,React,组件,class
From: https://www.cnblogs.com/SadicZhou/p/17774206.html

相关文章

  • React学习笔记06-函数式组件
    函数式组件即在React中通过函数的方式来声明一个组件importReactfrom"react"functionApp(){return(<div>函数式组件<div>hhh</div></div>)}/*16.8之前//无状态16.8之后reacthooks*/exportdef......
  • React学习笔记07-组件嵌套
    一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系在react中如果想要将一个组件嵌入到另外一个组件中只需要在父组件的render函数的返回值中放入子组件即可请看下面代码importReact,{Component}from"react"classNavbarextendsComponent{rende......
  • import { useRouter } from 'next/router'; 在非hooks 文件或组件中使用
    将 import{useRouter}from'next/router';改为 importRouterfrom"next/router";使用: Router.push('/');原来使用 import{useRouter}from'next/router';会导致报错如下  ......
  • React学习笔记05-类组件
    ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,ES6class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{rend......
  • 【Vue3响应式入门#01】Reactivity
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • 解决多路由复用同一组件页面不刷新问题
     如果可以的话,这个才是最终解决方案,可以解决复用同一个vue页面导致的生命周期只在初始化调用,后续不调用的问题,监听路由的变化只是调用接口,不会触发生命周期......
  • react + electron 打包记录
    package.json中的更改:增加: "homepage":"./",  "build":{  "productName":"xxxx",  "appId":"com.xxx.win",  "directories":{   "output":"dist&quo......
  • TS 踩坑笔记: 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding
    前言今天给大家分享一个在React项目中使用TypeScript遇到的错误项目背景React+TS的项目配置,项目中关于React组件的使用.tsx后缀,其他单纯的文件使用.ts后缀问题描述在React组件附近定义泛型的箭头函数时产生TS报错警告,原本以为是语法写错了但是实际上在.t......
  • 38 异步组件
    异步,需要时才被加载<template><div><KeepAlive><component:is="tabComponent"></component></KeepAlive><button@click="change">切换组件</button></div></template>......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Slider
    滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。该组件从APIVersion7开始支持。无子组件一、接口Slider(options?:{value?:number,min?:number,max?:number,step?:number,style?:SliderStyle,direction?:Axis,reverse?:boolean})从APIversion......