为react组件增加扩展class,解决react组件不能自定义className不生效的问题

最近在写shopify,发现不能对shopify的组件再次加class,弄起来很麻烦,最后研究出来了这个曲线的方法

import React from "react";
import { findDOMNode } from "react-dom";class ReactComponentAddClass extends React.Component {componentDidMount() {if (this.props.className) {const domNode = findDOMNode(this);const newClassName = domNode.className + " " + this.props.className;domNode.className = newClassName;console.log("为React组件增加class扩展", newClassName);}}
}export default ReactComponentAddClass;

用法: 这样处理,之前组件的属性还是可以正常使用的

import * as Polaris from "@shopify/polaris";
import ReactComponentAddClass from "../enhance/ReactComponentAddClass";
class PolarisCardDiy extends ReactComponentAddClass {render() {return <Polaris.Card {...this.props} />;}
}class PolarisCardSectionDiy extends ReactComponentAddClass {render() {return <Polaris.Card.Section {...this.props} />;}
}<PolarisCardDiyclassName={"rffreer"}title="test1234"><PolarisCardSectionDiy className={"borderTopLine"}>ffffff</PolarisCardSectionDiy></PolarisCardDiy>

前端新手,原创,转载请注明作者

为react组件增加扩展class,解决react组件不能自定义className不生效的问题相关推荐

react 消息订阅-发布机制(解决兄弟组件通信问题)
消息订阅-发布机制工具库: PubSubJS 下载: npm install pubsub-js --save 使用: 1)import PubSub from 'pubsub-js' //引入 2 ...
移动端蚂蚁组件（antd-mobile）- 解决日期组件中的语系问题
目标: 期望: 我们项目需要有繁简体两种语系,对于一般的选择器是有可配置文案的属性的,但是日期选择器却没有.通过研究还是发现了这个属性是可以配置语系问题的.试过之后发现竟然就是没有我需要的繁体(zh ...
解决ActiveX组件及Office程序等在Chrome、Edge新内核、360系列、FireFox、IE、Opera等桌面浏览器各版本中的嵌入使用问题
牛插(PluginOK)中间件(原名:本网通WebRunLocal)是一个实现网页浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本.强兼容.安全 ...
【愚公系列】2022年02月微信小程序-Component组件的扩展
文章目录一.Component组件的扩展二.使用扩展三.案例解析一.Component组件的扩展 // behavior.js module.exports = Behavior({defin ...
微信小程序-解决canvas组件永远在最高层问题
由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 为了解决原生组件层级最高的限制.小程序专门提供了 cover-vi ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
React memo使用解决高频组件渲染问题
问题:添加一个新的元素,导致所有子组件重复渲染问题. 期望:子组件不要频繁的渲染,只渲染新增或发生变化数据的子组件. 解决方案:使用memo包囊子组件. 代码: 子组件Cat.js: import R ...
在react中使用css modules解决组件之间样式覆盖问题
今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS 简单介绍一下自己的使用:come on baby 介绍:css in j ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

为react组件增加扩展class,解决react组件不能自定义className不生效的问题

这里写自定义目录标题

为react组件增加扩展class,解决react组件不能自定义className不生效的问题

最近在写shopify,发现不能对shopify的组件再次加class,弄起来很麻烦,最后研究出来了这个曲线的方法

用法: 这样处理,之前组件的属性还是可以正常使用的

为react组件增加扩展class,解决react组件不能自定义className不生效的问题相关推荐

最新文章

热门文章