Übergeben von Klassennamen, um auf Komponenten zu reagieren

Ich versuche, einen Klassennamen an eine Reaktionskomponente zu übergeben, um deren Stil zu ändern, und kann anscheinend nicht funktionieren:

class Pill extends React.Component {

  render() {

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

}

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

Ich versuche, den Stil der Pille zu ändern, indem ich den Namen der Klasse übergebe, die den jeweiligen Stil hat. Ich bin neu in React, also mache ich das vielleicht nicht richtig. Vielen Dank

Wenn Sie in React einen interpretierten Ausdruck übergeben möchten, müssen Sie ein Paar geschweifte Klammern öffnen. Versuchen:

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

Verwenden des npm-Pakets für Klassennamen

import classnames from 'classnames';

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

Nur als Referenz für zustandslose Komponenten:

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

Wird rendern:

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

pill ${this.props.styleName} wird "Pille undefiniert" erhalten, wenn Sie die Requisiten nicht einstellen

ich bevorzuge

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

oder

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

Für alle Interessierten stieß ich auf dasselbe Problem, wenn ich CSS-Module verwendete und CSS-Module reagierte .

Den meisten Komponenten ist ein CSS-Modulstil zugeordnet. In diesem Beispiel verfügt mein Button über eine eigene CSS-Datei, ebenso wie die übergeordnete Promo- Komponente. Aber ich möchte Button von Promo einige zusätzliche Stile übergeben

Der stylefähige Button sieht also so aus:

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 der obigen Button-Komponente behandeln die Button.css- Stile die allgemeinen Button-Stile. In diesem Beispiel nur eine .buttonKlasse

Dann in meiner Komponente , wo ich will die verwenden Knopf , und ich möchte auch , wie die Position der Schaltfläche Dinge ändern, ich zusätzliche Stile festlegen Promo.cssund durch als classNameStütze. In diesem Beispiel wieder .buttonKlasse genannt. Ich hätte es alles nennen können, z promoButton.

Natürlich wird diese Klasse mit CSS-Modulen sein, .Promo__button___2MVMDwährend die Schaltfläche so etwas wie sein wird.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} );

Verwenden Sie, wie bereits erwähnt, einen interpretierten Ausdruck mit geschweiften Klammern.

Vergessen Sie jedoch nicht, einen Standard festzulegen.
Andere haben vorgeschlagen, eine OR-Anweisung zu verwenden, um eine leere Zeichenfolge zu setzen, wenn undefined.

Aber es wäre noch besser, deine Requisiten zu deklarieren.

Vollständiges Beispiel:

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

Sie können dies erreichen, indem Sie den von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Klassennamen mit "interpolieren" this.props.className. Beispiel unten:

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

Mit React 16.6.3 und @Material UI 3.5.1 verwende ich Arrays in className wie className={[classes.tableCell, classes.capitalize]}

Versuchen Sie in Ihrem Fall Folgendes.

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

Mit der Unterstützung von React für die Zeichenfolgeninterpolation können Sie Folgendes tun:

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

In Typescript müssen Sie Typen von HTMLAttributesund festlegen React.FunctionComponent.

In den meisten Fällen müssen Sie es auf eine andere Schnittstelle oder einen anderen Typ erweitern.

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