传递类名以反应组件

[英]Passing in class names to react components


I am trying to pass in a classname to a react component to change it's style and cannot seem to get working:

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

class Pill extends React.Component {

  render() {

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

}

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

I am trying to change the style of the pill by passing in the name of the class that has the respective style. I am new to React so maybe I am not doing this the right way. Thanks

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

7 个解决方案

#1


72  

In React, when you want to pass an interpreted expression, you have to open a pair of curly braces. Try:

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

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

Using the classnames npm package

使用类名npm包

import classnames from 'classnames';

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

#2


8  

Just for the reference, for stateless components:

仅供参考,对于无状态组件:

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

Will render:

将呈现:

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

#3


6  

For anyone interested, I ran into this same issue when using css modules and react css modules.

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

Most components have an associated css module style, and in this example my Button has its own css file, as does the Promo parent component. But I want to pass some additional styles to Button from Promo

大多数组件都有一个关联的css模块样式,在这个例子中,我的Button有自己的css文件,Promo父组件也是如此。但我想将一些额外的样式传递给来自Promo的Button

So the styleable Button looks like this:

所以可定制的Button看起来像这样:

Button.js

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

In the above Button component the Button.css styles handle the common button styles. In this example just a .button class

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

Then in my component where I want to use the Button, and I also want to modify things like the position of the button, I can set extra styles in Promo.css and pass through as the className prop. In this example again called .button class. I could have called it anything e.g. promoButton.

然后在我想要使用Button的组件中,我也想修改按钮位置之类的东西,我可以在Promo.css中设置额外的样式并作为className prop传递。在这个例子中又称为.button类。我可以把它称为任何东西,例如promoButton。

Of course with css modules this class will be .Promo__button___2MVMD whereas the button one will be something like .Button__button___3972N

当然,对于css模块,这个类将是.Promo__button ___ 2MVMD,而按钮一个将是类似.Button__button ___ 3972N

Promo.js

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

#4


5  

pill ${this.props.styleName} will got "pill undefined" when you don't set the props

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

I prefer

我更喜欢

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

or

要么

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

#5


3  

You can achieve this by "interpolating" the className passed from the parent component to the child component using this.props.className. Example below:

您可以通过使用this.props.className“插入”从父组件传递到子组件的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>
  }
}

#6


3  

As other have stated, use an interpreted expression with curly braces.

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

But do not forget to set a default.
Others has suggested using a OR statement to set a empty string if undefined.

但是别忘了设置默认值。其他人建议使用OR语句设置空字符串,如果未定义。

But it would be even better to declare your Props.

但是宣布你的道具会更好。

Full example:

完整示例:

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: '',
};

#7


0  

With React's support for string interpolation, you could do the following:

有了React对字符串插值的支持,您可以执行以下操作:

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/08/26/fd45461a46b1ea0d12c0db66c2700930.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号