প্রতিক্রিয়া জেএসএক্সের কোটগুলির ভিতরে প্রসেস অ্যাক্সেস করুন

Question

জেএসএক্সে, propsএকটি উদ্ধৃত বৈশিষ্ট্য মানের ভিতরে থেকে কোনও মানকে আপনি কীভাবে উল্লেখ করবেন ?

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

<img className="image" src="images/{this.props.image}" />

ফলাফল এইচটিএমএল আউটপুট:

<img class="image" src="images/{this.props.image}">

Answer 1

প্রতিক্রিয়া (বা জেএসএক্স) কোনও অ্যাট্রিবিউট মানের মধ্যে ভেরিয়েবল ইন্টারপোলেশন সমর্থন করে না, তবে আপনি কোনও জেএস এক্সপ্রেশনটি কোঁকড়া ধনুর্বন্ধনীগুলির মধ্যে সম্পূর্ণ অ্যাট্রিবিউট মান হিসাবে রাখতে পারেন, সুতরাং এটি কাজ করে:

<img className="image" src={"images/" + this.props.image} />

Comments

এসআই-তে ব্যাকটিপস সম্পর্কে কী?

— ডেভিড লাভেরি

@DavidLavieri Cristi দেখি উত্তর stackoverflow.com/a/30061326/70345 নিচে।

— ইয়ান কেম্প

Answer 2

আপনি যদি এস template টেম্পলেট আক্ষরিক ব্যবহার করতে চান তবে টিক চিহ্নের চারপাশে আপনার ধনুর্বন্ধনী প্রয়োজন:

<img className="image" src={`images/${this.props.image}`} />

Comments

ভবিষ্যতের ES6 টেম্পলেট

— আক্ষরিক

ব্যাকটিক্স দ্বারা আটকানো স্ট্রিংটি একটি "টেম্পলেট আক্ষরিক": বিকাশকারী.মোজিলা.আর.ইন-

— জন স্নাইডার

Answer 3

আপনি যদি জেএসএক্সকে হারমোনি ব্যবহার করে থাকেন তবে আপনি এটি করতে পারেন:

<img className="image" src={`images/${this.props.image}`} />

এখানে আপনি srcএকটি প্রকাশ হিসাবে মান লিখছেন ।

Comments

এটি এমন কিছু যা খুঁজে পাওয়া শক্ত। এবং পুনঃব্যবহারযোগ্য

— ধারকগুলির জন্য এটি

লোক যাতে হারমোনি উল্লেখ করার সাথে বিভ্রান্ত না হয়, এটি ES6 স্ট্যান্ডার্ডের একটি অংশ , যখন উত্তরটি এটি একটি স্ট্যান্ডার্ড হওয়ার কয়েক মাস আগেই তারিখ হয়ে গেছে।

— Гринько

Answer 4

পরিবর্তনশীল এবং স্ট্রিং যুক্ত করার পরিবর্তে, আপনি ES6 টেম্পলেট স্ট্রিং ব্যবহার করতে পারেন! এখানে একটি উদাহরণ:

<img className="image" src={`images/${this.props.image}`} />

জেএসএক্সের ভিতরে থাকা সমস্ত অন্যান্য জাভাস্ক্রিপ্ট উপাদান হিসাবে, কোঁকড়া ধনুর্বন্ধনীগুলির অভ্যন্তরে টেম্পলেট স্ট্রিং ব্যবহার করুন। কোনও ভেরিয়েবল "ইনজেক্ট" করতে ডলার চিহ্ন ব্যবহার করুন তারপরে কোঁকড়া ধনুর্বন্ধনী বক্ররেখগুলি সহ আপনি ইনজেক্ট করতে চান। উদাহরণ স্বরূপ:

{`string ${variable} another string`}

Answer 5

সর্বোত্তম অনুশীলনগুলি হ'ল এর জন্য গিটার পদ্ধতি যুক্ত করা:

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

তারপরে, আপনার যদি পরে আরও যুক্তি থাকে তবে আপনি কোডটি সুচারুভাবে বজায় রাখতে পারেন।

Answer 6

লোকেদের জন্য 'মানচিত্র' ফাংশন এবং গতিশীল ডেটা সম্পর্কে উত্তরগুলি সন্ধান করা, এখানে একটি কার্যকরী উদাহরণ।

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

এটি URL হিসাবে " http://examole.com/randomview/images/2/dp_pics/182328.jpg " দেয় (এলোমেলো উদাহরণ)

Answer 7

দ্রষ্টব্য: প্রতিক্রিয়া হিসাবে আপনি কোঁকড়া বন্ধনী ভিতরে জাভাস্ক্রিপ্ট এক্সপ্রেশন রাখতে পারেন। এই উদাহরণটি আমরা এই সম্পত্তিটি ব্যবহার করতে পারি।
দ্রষ্টব্য: নীচের উদাহরণে একবার দেখুন:

class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}

Answer 8

ডায়নামিক শ্রেণীর নাম বা প্রপসের জন্য এখানে সেরা বিকল্পটি রয়েছে, জাভাস্ক্রিপ্টে যেমন করা হয় তেমন কিছু উপসংহার করুন।

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Comments

আমি classnamesগতিশীল ক্লাসের নামগুলি তৈরির জন্য প্যাকেজ ব্যবহার করার পরামর্শ দেব

— ডেভিড লাভেরি

Answer 9

তুমি ব্যবহার করতে পার

<img className="image" src=`images/${this.props.image}`>

অথবা

<img className="image" src={'images/'+this.props.image}>

অথবা

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }