将类名传递给react组件

Question

我试图将类名传递给react组件以更改其样式，但似乎无法正常工作：

class Pill extends React.Component {

  render() {

    return (
      <button className="pill {this.props.styleName}">{this.props.children}</button>
    );
  }

}

<Pill styleName="skill">Business</Pill>

我试图通过传递具有各自风格的类的名称来改变药丸的风格。我是新来的，所以也许我做得不对。谢啦

Answer 1

药丸${this.props.styleName}将在不设置道具时获得药丸未定义

我更喜欢

className={ "pill " + ( this.props.styleName || "") }

或

className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }

Answer 2

仅供参考，对于无状态组件：

// ParentComponent.js
import React from 'react';
import { ChildComponent } from '../child/ChildComponent';

export const ParentComponent = () =>
  <div className="parent-component">
    <ChildComponent className="parent-component__child">
      ...
    </ChildComponent>
  </div>

// ChildComponent.js
import React from 'react';

export const ChildComponent = ({ className, children }) =>
  <div className={`some-css-className ${className}`}>
    {children}
  </div>

将呈现：

<div class="parent-component">
  <div class="some-css-className parent-component__child">
    ...
  </div>
</div>

Answer 3

在React中，当您想要传递一个已解释的表达式时，必须打开一对花括号。尝试：

render () {
  return (
    <button className={`pill ${ this.props.styleName }`}>
      {this.props.children}
    </button>
  );
}

使用类名npm包

import classnames from 'classnames';

render() {
  return (
    <button className={classnames('pill', this.props.styleName)}>
      {this.props.children}
    </button>
  );
}