Html-react-parser: Jangan mengubah kasus tag

Dibuat pada 23 Jul 2018  ·  11Komentar  ·  Sumber: remarkablemark/html-react-parser

Saya perhatikan bahwa parser mengubah segalanya menjadi huruf kecil, yang buruk bagi saya karena saya memiliki beberapa tag peka huruf besar-kecil.

Apakah ada cara untuk mencegah hal ini?

Komentar yang paling membantu

saya sedang mengerjakan masalah itu saya sedang mengkode saat ini garpu bersih dari htmlparser2 dan parse5 bergabung dengan kedua algoritma, Anda kemudian dapat menggunakan adaptor reaksi dom parse5 yang akan didasarkan pada basis kode ini

Semua 11 komentar

Bolehkah saya meminta contoh dari masalah ini? Secara teknis, bukankah tag dan atribut HTML seharusnya tidak peka huruf besar-kecil ?

Tetapi mengenai pertanyaan yang ada, parser memperkecil atribut agar lebih mudah mengonversinya menjadi React props (lihat di sini ).

Jika kita ingin menjaga nama atribut tidak berubah, kita secara teknis dapat menyimpan kunci atribut asli alih-alih menggantinya di sini .

Sebenarnya, atribut dikecilkan ketika string HTML diubah menjadi node DOM. Ini berasal dari html-dom-parser , yang menggunakan htmlparser2 di bawah tenda (saat menggunakan dengan Node.js).

Saya terbuka untuk membuat opsi ini dapat dikonfigurasi.

Maaf untuk menghidupkan kembali masalah ini, tetapi saya menggunakan paket ini dan saya membutuhkan tag untuk menjadi camel case, karena C# akan menguraikannya nanti (saya tahu, ini berantakan, bukan kode saya dan saya tidak dapat mengubahnya)... I' sudah membaca htmlparser2 docs dan ada opsi lowerCaseTags , apakah cukup untuk mencegah tag menjadi huruf kecil?

@thismarcoantonio Ada PR (#79) yang mungkin melakukan apa yang Anda butuhkan

Untuk memberi Anda pembaruan @thismarcoantonio , ternyata # 79 akhirnya tidak digabungkan.

Mengenai pertanyaan Anda tentang tag yang menjadi camelCase, apakah Anda mengacu pada markup HTML mentah yang diteruskan ke parser?

Ya, tag-tag itu seperti: <someText: someOtherCodeHere /> . Saya tahu ini aneh, tetapi dalam kasus saya, saya menggunakan Parser untuk memiliki tag tersebut di React dan kemudian saya menggunakan renderToString dari react-dom/server untuk mendapatkan kode keluaran saya, dan saya berakhir dengan <sometext: someothercodehere></sometext: someothercodehere> . Dalam ekstensi React chrome, elemen saya adalah seperti: createElement('sometext: someothercodehere')

Masalah lain yang terkait dengan ini: Parsing string yang berisi atribut onclick atau viewbox, atribut tersebut tidak valid di React karena React menggunakan onClick dan viewBox sebagai gantinya, jadi dalam mengonversi atribut dari string html ke komponen React, atribut tersebut perlu diubah menjadi camel case atau mereka pecah. Alangkah baiknya jika konversi ini bisa saja terjadi secara default, tetapi sebagai alternatif jika Anda dapat memberikan opsi untuk mengganti atribut yang akan berfungsi.

@remarkablemark Ada pembaruan tentang masalah ini?

Saya menghadapi masalah serupa tetapi dalam kasus saya, string saya yang akan diuraikan seperti
Hello world <HighlightMe>Text to be highlighted</HighlightMe>
di mana HighlightMe adalah komponen khusus.

Pada dasarnya, saya perlu bantuan dalam mengurai string yang memiliki komponen khusus.

saya sedang mengerjakan masalah itu saya sedang mengkode saat ini garpu bersih dari htmlparser2 dan parse5 bergabung dengan kedua algoritma, Anda kemudian dapat menggunakan adaptor reaksi dom parse5 yang akan didasarkan pada basis kode ini

Di html-react-parser v0.12.0 , Anda dapat meneruskan opsi htmlparser2 saat parsing di sisi server (Node.js):

$ node
> const parse = require('html-react-parser');
> parse('<FooBar>baz</FooBar>', { htmlparser2: { lowerCaseTags: false } });
{
  '$$typeof': Symbol(react.element),
  type: 'FooBar',
  key: null,
  ref: null,
  props: { children: 'baz' },
  _owner: null,
  _store: {}
}

Lihat README.md , Repl.it demo , atau pull request #161 untuk informasi lebih lanjut.

Saya juga memperbarui FAQ README

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

rgavinc picture rgavinc  ·  4Komentar

christianfredh picture christianfredh  ·  5Komentar

anhtran picture anhtran  ·  3Komentar

frontendpm picture frontendpm  ·  4Komentar

dave-stevens-net picture dave-stevens-net  ·  9Komentar