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

为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} />;
  }
}

 <PolarisCardDiy
	className={"rffreer"}
  	 title="test1234"
 >
   <PolarisCardSectionDiy className={"borderTopLine"}>
     ffffff
   </PolarisCardSectionDiy>
 </PolarisCardDiy>

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