Passando nomi di classi di reagire componenti

Question

sto cercando di passare un nome di classe a un componente di reagire per cambiare il suo stile e non riesco a ottenere lavoro:

class Pill extends React.Component { 

    render() { 

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

} 

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

sto cercando di cambiare lo stile della pillola passando il nome della classe che ha il rispettivo stile. Sono nuovo di Reagire quindi forse non sto facendo questo nel modo giusto. Grazie

Answer 1

In React, quando si desidera passare un'espressione interpretata, è necessario aprire un paio di parentesi graffe. Prova:

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

Usando il pacchetto classnames NPM

import classnames from 'classnames'; 

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

Answer 2

È anche possibile fare questo:

class Pill extends React.Component { 

    render() { 

    return (
     <button { ...this.props }>{ this.props.children }</button> 
    ); 
    } 

} 

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

Answer 3

Per chiunque sia interessato, mi sono imbattuto in questo stesso problema quando si utilizza css modules e react css modules.

maggior parte dei componenti hanno uno stile modulo CSS associato, e in questo esempio il mio pulsante ha il proprio file css, come fa il Promo componente genitore. Ma voglio passare alcuni stili aggiuntivi per Pulsante da Promo

modo che il pulsante in grado style assomiglia a questo:

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

Nella componente Button sopra gli stili Button.css gestiscono gli stili di pulsante comuni. In questo esempio, solo una classe .button

Poi nel mio componente dove voglio usare il pulsante, e voglio anche di modificare le cose come la posizione del tasto, è possibile impostare gli stili supplementari in Promo.css e passare come il puntello className. In questo esempio, di nuovo chiamato classe .button. Avrei potuto chiamarlo qualsiasi, ad es. promoButton.

Naturalmente con moduli css questa classe sarà .Promo__button___2MVMD mentre il pulsante uno sarà qualcosa di simile a .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 4

Con Reagire di supporto per l'interpolazione stringa, si potrebbe fare lo seguente:

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

Answer 5

È possibile ottenere ciò "interpolando" il nome classe passato dal componente principale al componente figlio utilizzando this.props.className.Esempio di seguito:

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 6

Proprio per il riferimento, per i componenti stateless:

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

renderà:

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

Answer 7

pill ${this.props.styleName} volontà ottenuto "pillola non definito" quando non si imposta la oggetti di scena

Preferisco

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

o

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

Answer 8

Come altri hanno indicato, utilizzare un'espressione interpretata parentesi graffe.

Ma non dimenticare di impostare un valore predefinito.
Altri hanno suggerito di utilizzare un'istruzione OR per impostare una stringa vuota se undefined.

Ma sarebbe ancora meglio dichiarare i tuoi oggetti di scena.

esempio completa:

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