向自定义 React 组件添加额外的 class 个名称

Question

我想知道如何向自定义 React 组件添加额外的 class 名称，例如按钮。到目前为止，我已经尝试过使用 class1 ${class2} 甚至 classnames 的传统方式，但没有成功。

这是我尝试的示例： https://codesandbox.io/s/1zp7m2yv3

import React from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";
import "./styles.css";

const ButtonTest = props => {
  // const className = `button is-testing is-gradient ${props.className ? props.className : ''}`;
  const className = classNames(
    "button is-testing is-gradient cv",
    props.className
  );
  console.log("a:", className);

  if (props.href) {
    return (
      <a href={props.href} className={className} {...props}>
        {props.children}
      </a>
    );
  }

  return (
    <button className={className} {...props}>
      {props.children}
    </button>
  );
};

function App() {
  return (
    <div className="App">
      <ButtonTest href="https://google.vn">BUTTON LINK</ButtonTest>
      <ButtonTest className="aaa is-block">DEFAULT</ButtonTest>
      <ButtonTest href="https://google.vn" className="is-block dfdfdf">
        BUTTON LINk - FULL
      </ButtonTest>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

谢谢， D

Answer 1

发生这种情况是因为您在为组件赋予 className 属性后传播 props。

所以<ButtonTest className="aaa is-block">DEFAULT</ButtonTest>会尝试渲染

<button className={className} {...props}>

扩展为

<button className={className} className={"aaa is-block"}>

最后一个同名属性占上风。

您可以颠倒顺序并使用

<button {...props} className={className} >

这样传播 props 将被您传递的任何自定义道具覆盖。

见https://codesandbox.io/s/oqvy6qp56z

或者你可以提取你想直接使用的道具，这样 props 只保留其余的

喜欢

const ButtonTest = ({className:passedClasses, ...props}) => {
  const className = classNames(
    "button is-testing is-gradient cv",
    passedClasses
  );
  console.log("a:", className);

  if (props.href) {
    return (
      <a href={props.href} className={className} {...props}>
        {props.children}
      </a>
    );
  }

  return (
    <button className={className} {...props}>
      {props.children}
    </button>
  );
};

见https://codesandbox.io/s/l7ro16wqz9

向自定义 React 组件添加额外的 class 个名称

Add additonal class names to custom React component

css

components

custom-component

reactjs