ส่งผ่านชื่อคลาสเพื่อตอบสนองคอมโพเนนต์

ฉันกำลังพยายามส่งชื่อคลาสไปยังส่วนประกอบการตอบสนองเพื่อเปลี่ยนสไตล์และดูเหมือนจะใช้งานไม่ได้:

class Pill extends React.Component {

  render() {

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

}

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

ฉันพยายามเปลี่ยนรูปแบบของเม็ดยาโดยส่งชื่อชั้นที่มีรูปแบบตามลำดับ ฉันยังใหม่กับ React ดังนั้นบางทีฉันอาจจะไม่ได้ทำอย่างถูกต้อง ขอบคุณ

ใน React เมื่อคุณต้องการส่งผ่านนิพจน์ที่ตีความคุณต้องเปิดวงเล็บปีกกาคู่หนึ่ง ลอง:

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

การใช้แพ็คเกจ npm ชื่อคลาส

import classnames from 'classnames';

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

สำหรับการอ้างอิงสำหรับส่วนประกอบที่ไร้สัญชาติ:

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

จะแสดง:

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

pill ${this.props.styleName} จะได้รับ "ยาไม่ระบุ" เมื่อคุณไม่ได้ตั้งค่าอุปกรณ์ประกอบฉาก

ฉันชอบ

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

หรือ

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

สำหรับทุกคนที่สนใจผมวิ่งเข้าไปในปัญหาเดียวกันนี้เมื่อใช้โมดูล CSSและตอบสนองโมดูล CSS

ส่วนประกอบส่วนใหญ่มีรูปแบบโมดูล css ที่เกี่ยวข้องและในตัวอย่างนี้ปุ่มของฉันมีไฟล์ css ของตัวเองเช่นเดียวกับองค์ประกอบหลักของPromo แต่ฉันต้องการส่งต่อรูปแบบเพิ่มเติมบางอย่างให้กับปุ่มจากโปรโมชัน

ดังนั้นstyleลักษณะปุ่มสามารถเช่นนี้

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

ในองค์ประกอบปุ่มด้านบนสไตล์Button.css จะจัดการกับรูปแบบปุ่มทั่วไป ในตัวอย่างนี้เป็นเพียง.buttonชั้นเรียน

จากนั้นในส่วนประกอบของฉันที่ฉันต้องการใช้ปุ่มและฉันยังต้องการแก้ไขสิ่งต่างๆเช่นตำแหน่งของปุ่มฉันสามารถตั้งค่ารูปแบบพิเศษในPromo.cssและส่งผ่านเป็นclassNameเสาได้ ในตัวอย่างนี้เรียกอีกครั้งว่า.buttonคลาส promoButtonฉันจะได้เรียกมันว่าอะไรเช่น

แน่นอนด้วยโมดูล css คลาสนี้จะเป็น.Promo__button___2MVMDในขณะที่ปุ่มหนึ่งจะเป็นแบบนี้.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} );

ตามที่ระบุไว้อื่น ๆ ให้ใช้นิพจน์ที่ตีความด้วยเครื่องหมายปีกกา

แต่อย่าลืมตั้งค่าเริ่มต้น
อื่น ๆ undefinedได้แนะนำการใช้คำสั่งหรือการตั้งค่าสตริงที่ว่างเปล่าถ้า

แต่จะดีกว่าถ้าประกาศอุปกรณ์ประกอบฉากของคุณ

ตัวอย่างเต็ม:

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

คุณสามารถบรรลุนี้โดย "interpolating ว่า" className this.props.classNameผ่านจากองค์ประกอบแม่เพื่อองค์ประกอบที่เด็กใช้ ตัวอย่างด้านล่าง:

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

ด้วย React 16.6.3 และ @Material UI 3.5.1 ฉันกำลังใช้อาร์เรย์ใน className เช่น className={[classes.tableCell, classes.capitalize]}

ลองทำสิ่งต่อไปนี้ในกรณีของคุณ

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

ด้วยการสนับสนุน React สำหรับการแก้ไขสตริงคุณสามารถทำสิ่งต่อไปนี้:

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

ใน typescript คุณต้องกำหนดประเภทของHTMLAttributesและReact.FunctionComponent.

ในกรณีส่วนใหญ่คุณจะต้องขยายไปยังอินเทอร์เฟซหรือประเภทอื่น

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