জেএসএক্স এবং প্রতিক্রিয়ায় গতিশীল ট্যাগের নাম

162

আমি একটি প্রতিক্রিয়া উপাদান লিখতে চেষ্টা করি। এইচটিএমএল শিরোনাম ট্যাগগুলির জন্য (এইচ 1, এইচ 2, এইচ 3, ইত্যাদি ...), যেখানে শিরোনামের অগ্রাধিকারটি প্রপসগুলিতে আমরা নির্ধারিত অগ্রাধিকারের ভিত্তিতে গতিশীল পরিবর্তন করে।

এখানে আমি যা করার চেষ্টা করি।

<h{this.props.priority}>Hello</h{this.props.priority}>

প্রত্যাশিত আউটপুট:

<h1>Hello</h1>

এটি কাজ করছে না। এটি করার কোনও সম্ভাব্য পদ্ধতি আছে?

reactjs jsx

— ইরঙ্গা কাপুকোটুয়া
সূত্র

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

— জর্ডান চলমান

328

স্থানে না করার উপায় নেই, কেবল এটি একটি ভেরিয়েবলের মধ্যে রাখুন ( প্রথম অক্ষরের মূলধন সহ ):

const CustomTag = `h${this.props.priority}`;

<CustomTag>Hello</CustomTag>

— zerkms
সূত্র

5

অবশ্যই তুলনায় সহজ React.createClass, আমি এই উপায় পছন্দ। ধন্যবাদ।

— ভাদোরকোয়েস্ট

@ জারকিমস কাস্টমট্যাগে বৈশিষ্ট্যগুলি কীভাবে যুক্ত করবেন সে সম্পর্কে আপনার কোনও ধারণা আছে? ধন্যবাদ

— সাব্রিনা লুও

1

@Sabrina<CustomTag foo="bar">

— zerkms

হাহ। কিভাবে কাজ করে? যদি ভেরিয়েবলের নাম ছোট হাতের অক্ষর থাকে তবে এটি কেবল একটি ট্যাগ হিসাবে সন্নিবেশ করায় (উদাঃ যদি এটি কাস্টম ট্যাগ হয় তবে আমি <কাস্টমটাগ> হ্যালো </ কাস্টমটাগ> পেয়ে যাব)। এই কোথাও নথিভুক্ত করা হয়?

— ইব্রাহিম

5

যদি উপাদানটি কোনও সামগ্রীর সম্পত্তিতে সঞ্চিত থাকে তবে মূলধনীয় প্রথম অক্ষরটি প্রয়োজন হয় না। var foo = { bar: CustomTag }; return <foo.bar />ঠিকভাবে কাজ করে.

— jdunning

29

সম্পূর্ণতার জন্য, আপনি যদি একটি গতিশীল নাম ব্যবহার করতে চান তবে আপনি React.createElementজেএসএক্স ব্যবহার না করে সরাসরি কল করতে পারেন :

React.createElement(`h${this.props.priority}`, null, 'Hello')

এটি একটি নতুন ভেরিয়েবল বা উপাদান তৈরি করা এড়ায়।

প্রপস সহ:

React.createElement(
  `h${this.props.priority}`,
  {
    foo: 'bar',
  },
  'Hello'
)

ডক্স থেকে :

প্রদত্ত ধরণের একটি নতুন প্রতিক্রিয়া উপাদান তৈরি করুন এবং ফিরে দিন। প্রকারের যুক্তিটি হয় ট্যাগের নাম স্ট্রিং (যেমন 'div'বা 'span'), বা একটি প্রতিক্রিয়া উপাদান টাইপ (একটি শ্রেণি বা কোনও ক্রিয়া) হতে পারে।

জেএসএক্সের সাথে লিখিত কোড ব্যবহারে রূপান্তরিত হবে React.createElement()। আপনি React.createElement()যদি জেএসএক্স ব্যবহার করে থাকেন তবে আপনি সাধারণত অনুরোধ করবেন না । আরও জানতে JSX ছাড়াই প্রতিক্রিয়া দেখুন।

— ফেলিক্স ক্লিং
সূত্র

11

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

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

টাইপস্ক্রিপ্ট তা জানে না CustomTag এটি একটি বৈধ এইচটিএমএল ট্যাগ নাম এবং একটি অপ্রয়োজনীয় ত্রুটি ছুঁড়ে ফেলে।

ঠিক করতে, কাস্ট CustomTagহিসাবে keyof JSX.IntrinsicElements!

const CustomTag = `h${this.props.priority}` as keyof JSX.IntrinsicElements;

<CustomTag>Hello</CustomTag>

— জ্যাক স্টিম
সূত্র

আমি টাইপস্ক্রিপ্টে আছি তবে কাস্টিং এটি এ ত্রুটিটি দেয়:

Types of property 'crossOrigin' are incompatible.     Type 'string | undefined' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.       Type 'string' is not assignable to type '"" | "anonymous" | "use-credentials" | undefined'.

— পোয়েরাজোলু

8

অন্যান্য সমস্ত উত্তর ঠিকঠাক কাজ করছে তবে আমি কিছু অতিরিক্ত যুক্ত করব, কারণ এটি করে:

এটি কিছুটা নিরাপদ। এমনকি যদি আপনার টাইপ-চেকিং ব্যর্থ হয় তবে আপনি এখনও একটি উপযুক্ত উপাদান ফিরে আসেন।
এটি আরও ঘোষণামূলক। এই উপাদানটি দেখে যে কেউ এটি ফিরে আসতে পারে তা দেখতে পাবে।
এটি 'এইচ 1', 'এইচ 2' এর পরিবর্তে উদাহরণস্বরূপ আরও নমনীয়, ... আপনার শিরোনামের ধরণের জন্য আপনি কিছু অন্যান্য বিমূর্ত ধারণা 'এসএম', 'এলজি' বা 'প্রাথমিক', 'গৌণ' রাখতে পারেন

শিরোনাম উপাদান:

import React from 'react';

const elements = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
};

function Heading({ type, children, ...props }) {    
  return React.createElement(
    elements[type] || elements.h1, 
    props, 
    children
  );
}

Heading.defaultProps = {
  type: 'h1',
};

export default Heading;

যা আপনি এটির মতো ব্যবহার করতে পারেন

<Heading type="h1">Some Heading</Heading>

বা আপনার একটি আলাদা বিমূর্ত ধারণা থাকতে পারে, উদাহরণস্বরূপ আপনি আকার আকারগুলি যেমন সংজ্ঞা দিতে পারেন:

import React from 'react';

const elements = {
  xl: 'h1',
  lg: 'h2',
  rg: 'h3',
  sm: 'h4',
  xs: 'h5',
  xxs: 'h6',
};

function Heading({ size, children }) {
  return React.createElement(
    elements[size] || elements.rg, 
    props, 
    children
  );
}

Heading.defaultProps = {
  size: 'rg',
};

export default Heading;

যা আপনি এটির মতো ব্যবহার করতে পারেন

<Heading size="sm">Some Heading</Heading>

— সামান শাফিঘ
সূত্র

2

গতিশীল শিরোনাম (এইচ 1, এইচ 2 ...) এর উদাহরণে কোনও উপাদান ফিরে আসতে পারে React.createElement(উপরে ফেলিক্স দ্বারা উল্লিখিত )।

const Heading = ({level, children, ...props}) => {
    return React.createElement(`h${level}`, props , children)
}

সামঞ্জস্যযোগ্যতার জন্য, উভয় প্রপস এবং শিশুদের পাস করা হয়েছে।

উদাহরণ দেখুন

— robstarbuck
সূত্র