javascript - significado - Pasar nombres de clase para reaccionar componentes

nombres para niños raros

Question

Estoy tratando de pasar un nombre de clase a un componente de reacción para cambiar su estilo y parece que no funciona:

class Pill extends React.Component {

  render() {

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

}

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

Estoy tratando de cambiar el estilo de la píldora pasando el nombre de la clase que tiene el estilo respectivo. Soy nuevo en React, así que tal vez no lo estoy haciendo de la manera correcta. Gracias

Answer 1

Como han dicho otros, use una expresión interpretada con llaves.

Pero no olvide establecer un valor predeterminado.
Otros ha sugerido usar una instrucción OR para establecer una cadena vacía si undefined está undefined .

Pero sería aún mejor declarar tus accesorios.

Ejemplo completo:

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

Answer 2

Con React 16.6.3 y @Material UI 3.5.1, estoy usando matrices en className como className={[classes.tableCell, classes.capitalize]}

Pruebe algo como lo siguiente en su caso.

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

Answer 3

Con el soporte de React para la interpolación de cadenas, puede hacer lo siguiente:

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

Answer 4

En React, cuando desea pasar una expresión interpretada, debe abrir un par de llaves. Tratar:

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

Usando el paquete de nombres de classnames npm

import classnames from ''classnames'';

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

Answer 5

Para cualquier persona interesada, me encontré con este mismo problema al usar módulos css y reaccionar módulos css .

La mayoría de los componentes tienen un estilo de módulo CSS asociado, y en este ejemplo, mi botón tiene su propio archivo CSS, al igual que el componente principal Promo . Pero quiero pasar algunos estilos adicionales a Button desde Promo

Entonces el botón con style ve así:

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

En el componente Button anterior, los estilos Button.css manejan los estilos de botón comunes. En este ejemplo, solo una clase .button

Luego, en mi componente donde quiero usar el botón , y también quiero modificar cosas como la posición del botón, puedo establecer estilos adicionales en Promo.css y pasar como el nombre de className . En este ejemplo nuevamente se llama .button class. Podría haberlo llamado así, por ejemplo, promoButton .

Por supuesto, con los módulos CSS esta clase será .Promo__button___2MVMD mientras que el botón uno será algo así como .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 6

Puede lograr esto "interpolando" el className pasado del componente primario al componente secundario usando this.props.className . Ejemplo a continuación:

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

Answer 7

Solo como referencia, para componentes sin estado:

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

Rendirá:

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

Answer 8

pill ${this.props.styleName} tendrá "píldora indefinida" cuando no establezca los accesorios

yo prefiero

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

o

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