react动态修改css的样式，class多个类名的写法，ref，useRef的使用，父组件拿到子组件当中的引用，标签中定义两个类名的时候如何写样式

已于 2022-05-25 20:26:10 修改
阅读量969 收藏
点赞数
分类专栏： 前端(HTML 文章标签： 前端
于 2022-05-15 19:03:04 首次发布
原文链接：https://www.bilibili.com/video/BV1XF411B7zx?p=3
版权

其实一个标签中class中有两个名字，我们就可以理解为引用了两个类名的样式。前后可能会影响样式的覆盖。而不是理解为我定义了一个叫做两个类名连接起来组合成了一个新的名字。也可以这样理解。这不就相当于我们把多个类名相同的样式写到了一块了嘛

在这里插入图片描述

在这里插入图片描述
也可以通过三元表达式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述上面的input应该写一个ref

下面是父组件拿到子组件当中的引用
在这里插入图片描述

前端交互仔
关注
专栏目录
React18入门到实战2023版
郭宝的博客
10-24 936
React 是由Meta公司研发，是一个用于构建Web和原生交互界面的库。jsx 是 Javascript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。HTML的声明式模板写法JS的可编程能力概念：自定义Hook是以use打头的函数，通过自定义 Hook 函数可以用来实现逻辑的封装和复用。需求：实现点击toggle 显示/隐藏 this is div 这个组件/***/
11 【Teleport CSS功能】
DSelegent的博客
08-09 558
11 【Teleport CSS功能】
引用css样式时，一个class引用两个样式的写法( class="ico001 icoCom")。
sun0322
09-20 7034
一般在如下情况下使用:   Test001.jsp     title 001 使用两种样式时，中间用空格隔开即可   Test002.jsp     title 001 ------------------------------------------------------------------关于优先级: icoCom的优先级高于ico001
react 改变css样式_react怎么更改css样式
weixin_28977123的博客
12-23 2362
React点击/hover修改CSS样式(1)点击修改样式方法一：(typescript写法)type state = {selected: boolean;};class Measurement extends Component {constructor(props:any) {super(props);this.state = { selected: false };}handleClick...
模版样式的引入 两个类名的写法
weixin_46451295的博客
05-25 479
模版样式的引入两个类名的写法 1. className={${styles['panel']} ${styles['open']}} 就是 得这样写的 这样就支持 同时两个类名的写法
react 要修改被封装的样式如何修改？
Mia的博客
10-09 350
真是遇到了世纪难题，要修改antd table表格的颜色，但是公司已经将颜色主体封装进内部脚手架里，改一个就要全改。 解决方法： 在column中每项添加类名，然后找到源码，将源码中的公用部分替换成相应类名，此方法可以适用于各种css更改 let column = [ { title: '行号', dataIndex: 'key', key: 'key', className: 'table-color-dust', width: 50,
React组件——类组件
m0_58471238的博客
01-15 6773
React组件——类组件
React操作真实DOM实现动态吸底部的示例
08-29
1. React生命周期方法componentDidMount：这个方法在组件被挂载到DOM后调用，React 16版本后有更详细的生命周期方法，但在本示例中，componentDidMount用于执行一次性的初始化设置，比如添加事件监听器。 2. 获取...
react笔记
m0_60525480的博客
03-09 503
1.html文件中引入库：react、react-dom、Babel <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"&gt...
react中在元素中插入多个类名, 多个状态之间的类名切换等
业余前端的职业经历
08-24 1186
这个要是对vue的童鞋还是应该很简单的吧 在react的初学者中，这个还得稍微简单思考下呢 在正常的元素中。想使用多个类名那么之际在class 中书写就行了 <div class="test test1 demo2"></div> 那么div 这个元素就会有 test. test1 demo2 这三个类名了 其实如果只是简单的元素 我们在react中当然也可以这样做了 不过是吧 class 换成className <div className="test test1 demo
react ref获取样式
Var_YanGuangYing
01-08 1560
<div ref={dom=>this.dom=dom}>这里是jsx</div> var style = getComputedStyle(this.dom,null)
父组件无法改变子组件样式
不吃菠菜的大力
08-16 827
用了scoped的子组件样式，在父组件中是无法更改的。需要用deep .m-switchBar /deep/ ul li { width: 78px; }  
React useRef 指南
p1967914901的博客
10-30 2263
在本文中，我们将讨论使用 ref 访问 DOM 的 React `useRef` 钩子，以及 `ref` 和 `useRef` 之间的区别。
React的useRef
weixin_42450794的博客
07-31 1627
关于Ref的发展历程请看： https://juejin.im/post/5b59287af265da0f601317e3 1.创建useRef import React { useRef } from 'react'; const xRef = useRef(); <x ref={xRef} /> 注意，useRef只能在类组件中使用 class x extends ...
2.4多类选择器——多类名（class）
qq_62865634的博客
07-30 3881
本文仅仅简单介绍了多类选择器——多类名class
react useref_如何使用useRef React钩子
cuk0051的博客
08-27 1136
react userefCheck out my React hooks introduction first, if you’re new to them. 如果您是新手，请先查看我的React hooks简介 。 One React hook I sometimes use is useRef. 我有时使用的一个React挂钩是useRef 。 import React, { useRe...
React 中ref的几种用法
zhang_xin_new的博客
06-11 1万+
React 中ref的几种用法 1.字符串 通过 this.refs.a 来引用真实dom的节点 dom 节点上使用 <input type ="text" ref="a"/> 2.回调函数 回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的， 都是获取其引用。 <input type="text" ref={(in...
react的两种动态改变css样式的方法
热门推荐
qcg14774125的博客
04-10 2万+
第一种：动态添加class，以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.st...
CSS01
wwww00o的博客
07-20 2261
css语法的声明块css的注释快捷键为crtl+/;主要注释不可以嵌套使用。
react中父组件拿到子组件的回调
最新发布
01-24
在React中，父组件可以通过不同的方式获取子组件的回调函数。 方法一：通过props传递回调函数 在父组件中定义一个函数，并将该函数作为props传递给子组件。子组件在适当的时机调用该函数，从而实现父组件获取子组件的回调。 ```jsx // 父组件 import React, { Component } from 'react'; import Child from './Child'; class Parent extends Component { handleChildEvent = (childInstance) => { // 在父组件中获取子组件的实例 console.log(childInstance); // 调用子组件的方法 childInstance.sendMessage(); } render() { return ( <div> <Child onChildEvent={this.handleChildEvent} /> </div> ); } } export default Parent; ``` ```jsx // 子组件 import React, { Component } from 'react'; class Child extends Component { componentDidMount() { // 在子组件完成挂载时，将子组件的实例作为参数传递给父组件的函数 this.props.onChildEvent(this); } sendMessage = () => { console.log('sending message'); } render() { return ( <span>Child</span> ); } } export default Child; ``` 方法二：使用React.createRef() 在父组件中使用React.createRef()创建一个ref对象，并将该ref对象传递给子组件。子组件通过useImperativeHandle将自己的方法暴露给父组件。 ```jsx // 父组件 import React, { useRef } from 'react'; import Child from './Child'; const Parent = () => { const childRef = useRef(null); const handleChildEvent = () => { // 在父组件中调用子组件的方法 childRef.current.sendMessage(); } return ( <div> <Child onRef={childRef} /> <button onClick={handleChildEvent}>Call Child Method</button> </div> ); } export default Parent; ``` ```jsx // 子组件 import React, { useImperativeHandle, forwardRef } from 'react'; const Child = forwardRef((props, ref) => { const sendMessage = () => { console.log('sending message'); } // 将子组件的方法暴露给父组件 useImperativeHandle(ref, () => ({ sendMessage })); return ( <span>Child</span> ); }); export default Child; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值