传递类名以反应组件

Question

我试图将一个类名传递给一个react组件来改变它的样式,似乎无法正常工作:

class Pill extends React.Component {

  render() {

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

}

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

我试图通过传递具有相应风格的类的名称来改变药丸的风格.我是React的新手,所以也许我没有以正确的方式做到这一点.谢谢

Answer 1

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

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 = ( props ) =>
  <div className={ `some-css-className ${ props.className }` }>
    { props.children }
  </div>

将呈现:

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

Answer 3

pill ${this.props.styleName} 当你没有设置道具时,会得到"未定义药丸"

我更喜欢

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

要么

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

Answer 4

对于任何感兴趣的人,我在使用css模块和反应css模块时遇到了同样的问题.

大多数组件都有一个关联的css模块样式,在这个例子中,我的Button有自己的css文件,Promo父组件也是如此.但我想一些额外的风格传递给巴顿从促销

所以功能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道具传递.在这个例子中又称为.buttonclass.我可以把它称为任何东西,例如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} );

Answer 5

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

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

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

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

Answer 6

正如其他人所说,使用带花括号的解释表达式.

但是别忘了设置默认值.
其他人建议使用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: '',
};