Meneruskan nama kelas untuk mereaksi komponen

Saya mencoba meneruskan nama kelas ke komponen react untuk mengubah gayanya dan sepertinya tidak bisa berfungsi:

class Pill extends React.Component {

  render() {

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

}

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

Saya mencoba mengubah gaya pil dengan meneruskan nama kelas yang memiliki gaya masing-masing. Saya baru mengenal React jadi mungkin saya tidak melakukan ini dengan cara yang benar. Terima kasih

Di React, saat Anda ingin meneruskan ekspresi yang ditafsirkan, Anda harus membuka sepasang kurung kurawal. Mencoba:

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

Menggunakan classnames NPM paket

import classnames from 'classnames';

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

Hanya untuk referensi, untuk komponen tanpa negara:

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

Akan merender:

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

pill ${this.props.styleName} akan mendapatkan "pil tidak terdefinisi" jika Anda tidak menyetel properti

aku lebih memilih

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

atau

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

Bagi siapa pun yang tertarik, saya mengalami masalah yang sama ini saat menggunakan modul css dan mereaksikan modul css .

Sebagian besar komponen memiliki gaya modul css terkait, dan dalam contoh ini Tombol saya memiliki file cssnya sendiri, seperti halnya komponen induk Promo . Tetapi saya ingin memberikan beberapa gaya tambahan ke Tombol dari Promo

Jadi styleTombol yang bisa terlihat seperti ini:

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

Dalam komponen Button di atas, gaya Button.css menangani gaya tombol yang umum. Dalam contoh ini hanya satu .buttonkelas

Kemudian di komponen saya di mana saya ingin menggunakan Tombol , dan saya juga ingin memodifikasi hal-hal seperti posisi tombol, saya dapat mengatur gaya ekstra Promo.cssdan melewati sebagai classNamepenyangga. Dalam contoh ini lagi disebut .buttonkelas. Saya bisa menyebutnya apa saja misalnya promoButton.

Tentu saja dengan modul css kelas ini akan menjadi .Promo__button___2MVMDseperti tombol satu.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} );

Seperti yang dinyatakan orang lain, gunakan ekspresi yang ditafsirkan dengan tanda kurung kurawal.

Tapi jangan lupa setel default.
Orang lain menyarankan menggunakan pernyataan ATAU untuk menyetel string kosong if undefined.

Tetapi akan lebih baik untuk menyatakan Properti Anda.

Contoh lengkap:

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

Anda dapat mencapai ini dengan "interpolasi" className yang diteruskan dari komponen induk ke komponen anak menggunakan this.props.className. Contoh di bawah ini:

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

Dengan React 16.6.3 dan @Material UI 3.5.1, saya menggunakan array seperti className className={[classes.tableCell, classes.capitalize]}

Cobalah sesuatu seperti berikut ini dalam kasus Anda.

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

Dengan dukungan React untuk interpolasi string, Anda dapat melakukan hal berikut:

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

Di Skrip Ketik Anda perlu mengatur tipe HTMLAttributesdan React.FunctionComponent.

Dalam kebanyakan kasus, Anda perlu memperluasnya ke antarmuka atau tipe lain.

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