Добавить дополнительные имена классов в пользовательский компонент React - PullRequest
Новая
       40

Добавить дополнительные имена классов в пользовательский компонент React

0 голосов
/ 26 января 2019

Мне интересно, как добавить дополнительное имя класса в пользовательский компонент 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

1 Ответ

0 голосов
/ 26 января 2019

Это происходит потому, что вы распространяете 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

...