javascript - tutorial - react native




উপাদানগুলির প্রতিক্রিয়া জানাতে শ্রেণীর নামগুলিতে পাস করা (6)

অন্যরা যেমন বলেছে, কোঁকড়া ধনুর্বন্ধনী সহ একটি ব্যাখ্যাযুক্ত ভাব ব্যবহার করুন।

তবে একটি ডিফল্ট সেট করতে ভুলবেন না।
অন্যরা undefined থাকলে খালি স্ট্রিং সেট করতে একটি OR স্টেটমেন্ট ব্যবহার করার পরামর্শ দিয়েছে।

তবে আপনার প্রপসটি ঘোষণা করা আরও ভাল।

সম্পূর্ণ উদাহরণ:

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

শৈলীর পরিবর্তনের জন্য আমি একটি শ্রেণীতে একটি প্রতিক্রিয়া উপাদানকে দেওয়ার চেষ্টা করছি এবং এটি কাজ করছে বলে মনে হচ্ছে না:

class Pill extends React.Component {

  render() {

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

}

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

আমি যে ক্লাসটির স্ব স্ব স্টাইল রয়েছে তার নামে পাসের মাধ্যমে পিলের স্টাইলটি পরিবর্তন করার চেষ্টা করছি। আমি প্রতিক্রিয়াতে নতুন তাই সম্ভবত আমি এটি সঠিকভাবে করছি না। ধন্যবাদ


আগ্রহী যে কারও জন্য, সিএসএস মডিউলগুলি ব্যবহার করার সময় এবং সিএসএস মডিউলগুলি প্রতিক্রিয়া করার সময় আমি এই একই সমস্যার মধ্যে পড়েছিলাম।

বেশিরভাগ উপাদানগুলির একটি সম্পর্কিত সিএসএস মডিউল শৈলী রয়েছে এবং এই উদাহরণে প্রোমো প্যারেন্ট উপাদান হিসাবে আমার বাটনটির নিজস্ব সিএসএস ফাইল রয়েছে। তবে আমি প্রোমো থেকে বাটনে কিছু অতিরিক্ত শৈলী পাস করতে চাই

সুতরাং 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 ক্লাস

তারপরে আমার উপাদানগুলিতে যেখানে আমি বোতামটি ব্যবহার করতে চাই এবং আমি বোতামের অবস্থানের মতো জিনিসগুলিও সংশোধন করতে চাই, আমি Promo.css অতিরিক্ত শৈলীগুলি সেট করতে এবং className প্রোপ হিসাবে পাস করতে className । এই উদাহরণে আবার .button ক্লাস বলা হয়। আমি এটিকে promoButton কিছু বলতে promoButton

অবশ্যই সিএসএস মডিউলগুলির সাথে এই ক্লাসটি হবে .Promo__button___2MVMD বাটন .Promo__button___2MVMD অন্যদিকে বোতামটি এমন কিছু হবে .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} );

আপনি যখন pill ${this.props.styleName} সেট করবেন না তখন pill ${this.props.styleName} "" পিল pill ${this.props.styleName} "পেয়ে যাবে

আমি পছন্দ করি

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

অথবা

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

প্রতিক্রিয়াতে, আপনি যখন কোনও ব্যাখ্যাযুক্ত ভাবটি পাস করতে চান, আপনাকে এক জোড়া কোঁকড়ানো ধনুর্বন্ধনী খোলার থাকতে হবে। চেষ্টা করুন:

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

classnames নামগুলি এনপিএম প্যাকেজ ব্যবহার করে

import classnames from 'classnames';

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

স্ট্রিং অন্তরঙ্গকরণের জন্য প্রতিক্রিয়াটির সমর্থন সহ, আপনি নিম্নলিখিতটি করতে পারেন:

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


১ 16..6.৩ এবং @ মেটেরিয়াল ইউআই 3.5.৩.১ এর প্রতিক্রিয়া সহ, আমি className={[classes.tableCell, classes.capitalize]} মতো className={[classes.tableCell, classes.capitalize]} নামগুলিতে অ্যারে ব্যবহার করছি className={[classes.tableCell, classes.capitalize]}

আপনার ক্ষেত্রে নিম্নলিখিত মত কিছু চেষ্টা করুন।

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




reactjs