传递类名称以响应组件

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

class Pill extends React.Component {

  render() {

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

}

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

我试图通过传递具有相应样式的类的名称来更改药丸的样式。我是React的新手，所以也许我做的方式不正确。谢谢

在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>
  );
}

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

// 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>

pill ${this.props.styleName} 当您不设置道具时，将得到“药丸未定义”

我更喜欢

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

要么

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

任何有兴趣，我用的时候遇到了同样的问题CSS模块和反应的CSS模块。

大多数组件具有关联的css模块样式，在此示例中，我的Button和Promo父组件也具有自己的css文件。但我想从促销中将一些其他样式传递给Button

因此，功能style强大的Button如下所示：

Button.js

import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

class Button extends Component {

  render() {

    let button = null,
        className = ''

    if(this.props.className !== undefined){
        className = this.props.className
    }

    button = (
      <button className={className} styleName='button'>
        {this.props.children}
      </button>
    )

    return (
        button
    );
  }
};

export default CSSModules(Button, styles, {allowMultiple: true} )

在上面的Button组件中，Button.css样式处理常见的按钮样式。在这个例子中只是一个.button类

然后，在我想使用Button的组件中，并且我还想修改诸如按钮位置之类的内容，我可以在其中设置其他样式Promo.css并将其作为className道具传递。在此示例中，再次称为.button类。我可以称它为任何东西，例如promoButton。

当然，对于css模块，此类将是此类，.Promo__button___2MVMD而按钮一将是类似.Button__button___3972N

Promo.js

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';

import Button from './Button/Button'

class Promo extends Component {

  render() {

    return (
        <div styleName='promo' >
          <h1>Testing the button</h1>
          <Button className={styles.button} >
            <span>Hello button</span>
          </Button>
        </div>
      </Block>
    );
  }
};

export default CSSModules(Promo, styles, {allowMultiple: true} );

如前所述，使用带花括号的解释表达式。

但是不要忘记设置默认值。
其他人建议使用OR语句设置空字符串if undefined。

但是声明您的道具会更好。

完整示例：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Pill extends Component {

  render() {

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

}

Pill.propTypes = {
  className: PropTypes.string,
};

Pill.defaultProps = {
  className: '',
};

您可以使用来“内插”从父组件传递到子组件的className来实现this.props.className。下面的例子：

export default class ParentComponent extends React.Component {
  render(){
    return <ChildComponent className="your-modifier-class" />
  }
}

export default class ChildComponent extends React.Component {
  render(){
    return <div className={"original-class " + this.props.className}></div>
  }
}

使用React 16.6.3和@Material UI 3.5.1，我在className中使用数组 className={[classes.tableCell, classes.capitalize]}

根据您的情况尝试以下操作。

class Pill extends React.Component {
    render() {
        return (
           <button className={['pill', this.props.styleName]}>{this.props.children}</button>
        );
    }
}

借助React对字符串插值的支持，您可以执行以下操作：

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

在Typescript中，您需要设置HTMLAttributes和的类型React.FunctionComponent。

在大多数情况下，您需要将其扩展到另一个接口或类型。

const List: React.FunctionComponent<ListProps &
  React.HTMLAttributes<HTMLDivElement>> = (
  props: ListProps & React.HTMLAttributes<HTMLDivElement>
) => {
  return (
    <div className={props.className}>
      <img className="mr-3" src={props.icon} alt="" />
      {props.context}
    </div>
  );
};

interface ListProps {
  context: string;
  icon: string;
}