向自定义 React 组件添加额外的类名

Question

我想知道如何向自定义 React 组件（如 Button）添加额外的类名。到目前为止，我已经尝试过使用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