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

Question 1

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

class Pill extends React.Component {

  render() {

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

}

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

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

Question 2

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

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

Question 3

রাষ্ট্রহীন উপাদানগুলির জন্য কেবল রেফারেন্সের জন্য:

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

Question 4

pill ${this.props.styleName} আপনি প্রপস সেট না করলে "পিল অপরিজ্ঞাত" পাবেন get

আমি পছন্দ করি

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

বা

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

Question 5

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

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

সুতরাং styleভালো সক্ষম বাটন দেখায়:

বাটন.জেএস

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প্রপ হিসাবে পাস করতে পারি । এই উদাহরণে আবার .buttonক্লাস বলা হয় । আমি এটিকে কিছু বলতে পারতাম উদা promoButton।

অবশ্যই সিএসএস মডিউলগুলির সাথে এই ক্লাসটি থাকবে .Promo__button___2MVMDতবে বোতামটি একরকম কিছু হবে.Button__button___3972N

প্রোমো.জেএস

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

Question 6

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

তবে একটি ডিফল্ট সেট করতে ভুলবেন না।
অন্যরা যদি খালি স্ট্রিং সেট করতে একটি 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: '',
};

Question 7

আপনি পিতামাত উপাদান থেকে সন্তানের উপাদান ব্যবহার করে ক্লাসনেম "ইন্টারপোল্টিং" করে এটি অর্জন করতে পারেন 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>
  }
}

Question 8

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

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

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

Question 9

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

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

Question 10

টাইপস্ক্রিপ্টে আপনাকে 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;
}