Klassenamen doorgeven om componenten te reageren

Ik probeer een klassenaam door te geven aan een react-component om de stijl te veranderen en het lukt niet om te werken:

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

Ik probeer de stijl van de pil te veranderen door de naam door te geven van de klasse die de respectieve stijl heeft. Ik ben nieuw bij React, dus misschien doe ik dit niet op de juiste manier. Bedankt

Antwoord 1, autoriteit 100%

Als je in React een geïnterpreteerde uitdrukking wilt doorgeven, moet je een paar accolades openen. Probeer:

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

Het klassennamennpm-pakket

gebruiken

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

Antwoord 2, autoriteit 24%

Alleen ter referentie, voor stateless componenten:

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

Wordt weergegeven:

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

Antwoord 3, autoriteit 14%

pill ${this.props.styleName}krijgt “pill undefined” als je de rekwisieten niet instelt

Ik heb liever

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

of

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

Antwoord 4, autoriteit 4%

Voor iedereen die geïnteresseerd is, ik kwam hetzelfde probleem tegen bij het gebruik van css-modulesen reageer css-modules.

De meeste componenten hebben een bijbehorende CSS-modulestijl, en in dit voorbeeld heeft mijn Buttonzijn eigen CSS-bestand, net als de bovenliggende component Promo. Maar ik wil wat extra stijlen doorgeven aan Buttonvan Promo

Dus de styleable Button ziet er als volgt uit:

Knop.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 de bovenstaande Button-component behandelen de stijlen Button.cssde algemene knopstijlen. In dit voorbeeld alleen een .buttonklasse

Vervolgens kan ik in mijn component waar ik de Knopwil gebruiken, en ik wil ook dingen zoals de positie van de knop wijzigen, extra stijlen instellen in Promo.cssen geef door als de prop className. In dit voorbeeld opnieuw de klasse .buttongenoemd. Ik had het alles kunnen noemen, b.v. promoButton.

Natuurlijk met CSS-modules zal deze klasse .Promo__button___2MVMDzijn, terwijl de knop zoiets als .Button__button___3972N

zal zijn

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

Antwoord 5, autoriteit 4%

Zoals anderen al hebben gezegd, gebruik een geïnterpreteerde uitdrukking met accolades.

Maar vergeet niet een standaard in te stellen.
Anderen hebben voorgesteld om een ​​OR-statement te gebruiken om een ​​lege string in te stellen als undefined.

Maar het zou nog beter zijn om je rekwisieten te declareren.

Volledig voorbeeld:

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

Antwoord 6, autoriteit 2%

U kunt dit bereiken door de className die is doorgegeven van de bovenliggende component naar de onderliggende component te “interpoleren” met behulp van this.props.className. Voorbeeld hieronder:

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

Antwoord 7, autoriteit 2%

In Typescript moet je typen HTMLAttributesen React.FunctionComponentinstellen.

In de meeste gevallen zul je het nodig hebben om het uit te breiden naar een ander interface of 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;
}

Antwoord 8

Met React 16.6.3 en @Material UI 3.5.1 gebruik ik arrays in className zoals className={[classes.tableCell, classes.capitalize]}

Probeer in jouw geval iets als het volgende.

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

Antwoord 9

Met React’s ondersteuning voor string-interpolatie, zou je het volgende kunnen doen:

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