Nama tag dinamis dalam jsx dan Bereaksi

Saya mencoba menulis komponen Bereaksi. untuk tag heading html (h1, h2, h3, dll ...), di mana prioritas heading berubah secara dinamis berdasarkan prioritas yang telah kami tentukan dalam alat peraga.

Inilah yang saya coba lakukan.

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

output yang diharapkan:

<h1>Hello</h1>

Ini tidak bekerja. Apakah ada metode yang memungkinkan untuk melakukan ini?

Tidak ada cara untuk melakukan itu di tempat, cukup letakkan di dalam variabel ( dengan huruf kapital pertama ):

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

<CustomTag>Hello</CustomTag>

Untuk kelengkapan, jika Anda ingin menggunakan nama dinamis, Anda juga dapat langsung menelepon React.createElementdaripada menggunakan JSX:

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

Ini menghindari keharusan membuat variabel atau komponen baru.

Dengan alat peraga:

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

Dari dokumen :

Buat dan kembalikan elemen Bereaksi baru dari tipe yang diberikan. Argumen tipe dapat berupa string nama tag (seperti 'div'atau 'span'), atau tipe komponen Bereaksi (kelas atau fungsi).

Kode yang ditulis dengan BEJ akan dikonversi untuk digunakan React.createElement(). Anda biasanya tidak akan meminta React.createElement()secara langsung jika Anda menggunakan JSX. Lihat Bereaksi Tanpa BEJ untuk mempelajari lebih lanjut.

Jika Anda menggunakan TypeScript, Anda akan melihat kesalahan seperti ini:

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

TypeScript tidak tahu itu CustomTagadalah nama tag HTML yang valid dan melemparkan kesalahan yang tidak membantu.

Untuk memperbaikinya, gunakan CustomTagsebagai keyof JSX.IntrinsicElements!

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

<CustomTag>Hello</CustomTag>

Semua jawaban lain berfungsi dengan baik tetapi saya akan menambahkan beberapa tambahan, karena dengan melakukan ini:

1. Ini sedikit lebih aman. Bahkan jika pengecekan tipe Anda gagal, Anda masih mengembalikan komponen yang tepat.
2. Itu lebih deklaratif. Siapa pun dengan melihat komponen ini dapat melihat apa yang dapat dikembalikan.
3. Misalnya, lebih fleksibel daripada 'h1', 'h2', ... untuk jenis Heading Anda, Anda dapat memiliki beberapa konsep abstrak lainnya 'sm', 'lg' atau 'primer', 'sekunder'

Komponen Tajuk:

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;

Yang dapat Anda gunakan seperti itu

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

atau Anda dapat memiliki konsep abstrak yang berbeda, misalnya Anda dapat menentukan ukuran alat peraga seperti:

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;

Yang dapat Anda gunakan seperti itu

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

Dalam contoh heading dinamis (h1, h2 ...) , komponen dapat kembali React.createElement(disebutkan di atas oleh Felix ) seperti itu.

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

Untuk kompabilitas, baik alat peraga dan anak-anak dilewatkan

Lihat Contoh