घटकों पर प्रतिक्रिया करने के लिए वर्ग नामों में पासिंग

Question

मैं प्रतिक्रिया देने के लिए एक classname में पास करने की कोशिश कर रहा हूं कि यह शैली है और इसे काम नहीं मिल रहा है:

class Pill extends React.Component {

  render() {

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

}

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

मैं उस वर्ग के नाम से गुजर कर गोली की शैली को बदलने की कोशिश कर रहा हूं जिसमें संबंधित शैली है। मैं रिएक्ट करने के लिए नया हूं इसलिए शायद मैं यह सही तरीके से नहीं कर रहा हूं। धन्यवाद

Answer 1

प्रतिक्रिया में, जब आप एक व्याख्या की गई अभिव्यक्ति को पास करना चाहते हैं, तो आपको घुंघराले ब्रेसिज़ की एक जोड़ी खोलनी होगी। प्रयत्न:

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

क्लासनाम एनपीएम पैकेज का उपयोग करना

import classnames from 'classnames';

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

Comments

यह बेहतर क्यों है: प्रदर्शन? पठनीयता अन्य ? शाब्दिक तार (आपका पहला उदाहरण) ES6 का हिस्सा है, इसलिए यह एक मानक है। यह कम कोड बनाता है और आयात से बचता है। यह मेरे लिए बेहतर लगता है, लेकिन दूसरे समाधान में तर्क हो सकते हैं।

— मॉस

उपरोक्त उदाहरण में आप बिल्कुल सही हैं, ES6 स्ट्रिंग्स का उपयोग करना बेहतर है। मैं कहूंगा कि सहपाठियों को पठनीयता और DRY के मामले में बेहतर है जब आपको सशर्त से निपटना होगा, जैसे कि classnames readme में github.com/JedWatson/classnames#usage-with-reanjs दिखाता है ।

— gcedo

{"ब्रेक्स, [] ब्रैकेट्स, () कोष्ठक - आपको" घुंघराले ब्रेसिज़ "कहने की आवश्यकता नहीं है क्योंकि ब्रेसिज़ परिभाषा द्वारा घुंघराले हैं।

— अजीब बात है

Answer 2

केवल संदर्भ के लिए, स्टेटलेस घटकों के लिए:

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

Comments

एक वर्ग घटक पर एक रिएक्ट घटक पास करने के लिए className प्रोप को जोड़ना नहीं चाहिए, यह नाम प्रोप के रूप में पारित करने के बजाय पहले कंटेनर तत्व में दर्ज करें?

— TheSereneRebel

@theSereneRebel नहीं, यह नहीं है। यहाँ एक उदाहरण देखें: codesandbox.io/s/clever-knuth-enyju

— Mahdi

@theSereneRebel एक अच्छी बात है या नहीं यह एक अलग विषय है।

— महदी

Answer 3

pill ${this.props.styleName} जब आप प्रॉपर सेट नहीं करते हैं तो "गोली अपरिभाषित" मिलेगी

मैं पसंद करता हूं

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

या

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

Answer 4

दिलचस्पी रखने वाले किसी के लिए, मैं css मॉड्यूल का उपयोग करते समय और css मॉड्यूल प्रतिक्रिया करते समय इसी समस्या में भाग गया ।

अधिकांश घटकों में एक संबद्ध सीएसएस मॉड्यूल शैली होती है, और इस उदाहरण में मेरे बटन की अपनी सीएसएस फ़ाइल है, जैसा कि प्रोमो पैरेंट घटक है। लेकिन मैं प्रोमो से बटन के लिए कुछ अतिरिक्त शैलियों को पारित करना चाहता हूं

तो 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।

बेशक सीएसएस मॉड्यूल के साथ यह वर्ग होगा .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} );

Comments

2018 अद्यतन: का प्रयोग propTypes और defaultProps जहां एक संपत्ति या मौजूद नहीं हो सकता है मामलों को संभालने के लिए क्लीनर, और पसंद किया जाता है।

— ब्रायनएचवीबी

Answer 5

जैसा कि अन्य ने कहा है, घुंघराले ब्रेस के साथ एक व्याख्या की गई अभिव्यक्ति का उपयोग करें।

लेकिन एक डिफ़ॉल्ट सेट करने के लिए मत भूलना।
यदि कोई खाली स्ट्रिंग सेट करने के लिए दूसरों ने OR कथन का उपयोग करने का सुझाव दिया है 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: '',
};

Answer 6

आप इसे "इंटरपोलेटिंग" द्वारा प्राप्त कर सकते हैं, क्लासनेम का उपयोग मूल घटक से चाइल्ड कंपोनेंट में किया जाता है 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>
  }
}

Answer 7

रिएक्ट 16.6.3 और @ मेटेरियल यूआई 3.5.1 के साथ, मैं क्लासनेम में सरणियों का उपयोग कर रहा हूं जैसे className={[classes.tableCell, classes.capitalize]}

अपने मामले में निम्नलिखित की तरह कुछ प्रयास करें।

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

Answer 8

स्ट्रिंग प्रक्षेप के लिए रिएक्ट के समर्थन के साथ, आप निम्नलिखित कार्य कर सकते हैं:

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

Answer 9

टाइपस्क्रिप्ट में आपको 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;
}