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

Posted 2023-02-23

【中文标题】向自定义 React 组件添加额外的类名

【英文标题】：Add additonal class names to custom React component

【发布时间】：2019-06-20 00:15:45

【问题描述】：

我想知道如何向自定义 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

【问题讨论】：

您能否详细描述您的问题？

问题是当我尝试添加更多类时，似乎定义的类button is-testing is-gradient cv 被更新的类替换，我的示例中的预期结果是所有 Button 组件都应该有一个边框，因为 CSS 中的.is-testing

【参考方案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

【讨论】：

感谢您快速而清晰的解释，我很遗憾没有注意到我将...props 放在首位的顺序。第二个建议对我来说是新的，并且会尝试一下。非常感谢你