代码之家 › 专栏 › 技术社区 › Suffii

在DOM中呈现时无法将类名添加到按钮组件

jsx reactjs

0

Suffii · 技术社区 · 7 年前

你能看一下这个片段并告诉我为什么我不能传递的类名吗 .btn-primary

<Button styleClass="btn-primary" text='Primary Button' />

${styleClass} 在inspector中的元素中,而不是在类名中

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={'btn ${styleClass}'}
    >
      {text}
    </button>
  );
};
ReactDOM.render(
               <div>
                 <Button styleClass="btn-primary" text='Primary Button' />
               </div>
, window.root);

body{
padding:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root"></div>

1 回复 | 直到 7 年前

1

2

Alexander Staroselsky 7 年前

更改了 ' grave accent )字符串的字符 template literals 插值使用 ${} :

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={`btn ${styleClass}`}
    >
      {text}
    </button>
  );
};
ReactDOM.render(
  <div>
    <Button styleClass="btn-primary" text='Primary Button' />
  </div>
, window.root);

body{
  padding: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root"></div>

或无字符串插值:

const Button = ({ styleClass, text }) => {
  return (
    <button
      type="button"
      className={'btn ' + styleClass }
    >
      {text}
    </button>
  );
};