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

之所以会发生这种情况，是因为在将props属性赋予组件之后，您正在传播className。

所以<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组件

1 个答案: