Javascript 传递类名以响应组件

Passing in class names to react components

提问by hilarl

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 的新手，所以也许我没有以正确的方式做这件事。谢谢

回答by gcedo

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 classnamesnpm package

使用类名npm 包

import classnames from 'classnames';

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

回答by Mahdi

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

Will render:

将呈现：

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

回答by salars

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

pill ${this.props.styleName}当你不设置道具时会得到“pill undefined”

I prefer

我更喜欢

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

or

或者

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

回答by svnm

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

对于任何感兴趣的人，我在使用css modules和react css modules时遇到了同样的问题。

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

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

So the styleable Button looks like this:

所以style能够按钮看起来像这样：

Button.js

按钮.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.cssstyles handle the common button styles. In this example just a .buttonclass

在上面的 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.cssand pass through as the classNameprop. In this example again called .buttonclass. I could have called it anything e.g. promoButton.

然后在我想使用Button 的组件中，我还想修改按钮的位置等内容，我可以设置额外的样式Promo.css并作为className道具传递。在这个例子中再次调用.button类。我可以称之为任何东西，例如promoButton。

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

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

Promo.js

促销.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} );

回答by jamietelin

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 语句来设置空字符串 if undefined。

But it would be even better to declare your Props.

但最好是声明你的 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: '',
};

回答by Stafie Anatolie

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

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

回答by Devakhim

With React 16.6.3 and @Material UI 3.5.1, I am using arrays in className like className={[classes.tableCell, classes.capitalize]}

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

Try something like the following in your case.

在您的情况下尝试以下操作。

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

回答by Rust

In Typescript you need to set types of HTMLAttributesand React.FunctionComponent.

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

In most cases you will need will be extending it to another interface or type.

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

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

回答by Tom Goldenberg

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