React Değişken Deyimli HTML Ekleme (JSX)

206

Ben React ile bir şey inşa ediyorum ben JSX React Değişkenleri ile HTML eklemek gerekir. Böyle bir değişkene sahip olmanın bir yolu var mı:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

ve bu şekilde reaksiyona sokmak ve işe yaramasını sağlamak mı?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

HTML'yi beklendiği gibi eklemesini sağladı mı? Bu satır içi yapabilen bir tepki işlevi veya bunun çalışmasına izin verecek şeyleri ayrıştırma yöntemi hakkında hiçbir şey görmedim veya duymadım.

— Kyle Hotchkiss
kaynak

299

Sen kullanabilirsiniz dangerouslySetInnerHTML , örneğin

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

— Douglas
kaynak

2

Bir şey eklemeniz gerekiyorsa bu nasıl çalışır <head>?

— Danielle Madeley

ComponentDidMount normal DOM yöntemleri çalışmalıdır, ben daha önce olsa yapmadım.

— Douglas

@DanielleMadeley <head> içine koşullu IE yorumları eklemeye mi çalışıyorsunuz? Öyleyse, burada açıklanan numarayı kullanarak başarılı oldum: nemisj.com/conditional-ie-comments-in-react-js

— Cam Jackson

3

Bir yöntemi karma değil, dangerouslySetInnerHTML öğesine ilettiğinizden emin olun. Dokümanlara göre, sadece bir hash geçmek tehlikeli. Referans: facebook.github.io/react/tips/dangerously-set-inner-html.html

— criticerz

1

Div'i yerleştirmeden bir yol var mı?

— ahbap

103

dangerouslySetInnerHTMLEnjekte ettiğiniz HTML dizesinde ne olduğunu bilmiyorsanız tehlikeli olabileceğini unutmayın . Bunun nedeni, kötü amaçlı istemci tarafı kodunun komut dosyası etiketleri aracılığıyla enjekte edilebilmesidir.

Oluşturduğunuz HTML'nin XSS (siteler arası komut dosyası oluşturma) güvenli olduğundan% 100 emin değilseniz , HTML dizesini DOMPurify gibi bir yardımcı programla sterilize etmek iyi bir fikir olabilir .

Misal:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

— Yo Wakita
kaynak

@vsync hayır hayır olmamalı :)

— Artem Bernatskyi

1

sadece html etiketlerini değil aynı zamanda malzeme ui Alert etiketi gibi kütüphaneden etiket oluşturmak mümkündür. kodun böyle olmasını istiyorum

import DOMPurify from 'dompurify'  const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >';   render: function() {     return (         <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>     ); }

— sasha romanov

@sasharomanov, Bu senaryo için herhangi bir çözüm buldunuz mu?

— Nimish goel

51

dangerouslySetInnerHTML , etiketin içinde ayarlandığından birçok dezavantaja sahiptir.

Bu amaçla npm'de bir tane bulduğum gibi bazı reaksiyon sarıcı kullanmanızı öneririm. html-tepki-ayrıştırıcı aynı işi yapar.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Çok basit :)

— user2903536
kaynak

3

"dangerouslySetInnerHTML, etiketin içinde ayarlandığından birçok dezavantaja sahiptir." Bununla ilgili daha fazla açıklayabilir misiniz? Html-tepki-ayrıştırıcı ve sanatized innerHtml arasında ne temel fark olduğunu düşünmeye çalışıyorum

— dchhetri

Görünüşe göre html-tepki-ayrıştırıcı girişi dezenfekte etmiyor - SSS'ye bakın

— Little Brain

28

Bunu kullanarak ''dize yapıyorsunuz. Ters virgül kullanmadan kullanabilirsiniz.

— iamnotbatma
kaynak

14

İlk başta güldüm ve sonra aklımı uçurmak için bir şans verdim

— M,

1

Şimdiye kadar en basit cevap özellikle HTML sizin tarafınızdan yazılmışsa ve kullanıcı girdisine göre dinamik. Kelimenin tam anlamıyla var var myHtml = Bazı metinler ; ve işe yarıyor

— pat8719

1

Bu en iyi cevap. Teşekkürler dostum!

— Andy Mercer

@AndyMercer

— iamnotbatma

3

Linter hatalarını önlemek için bunu şu şekilde kullanıyorum:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

— Tudor Morar
kaynak

3

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

'' Kullanarak değeri bir dizeye ayarlar ve React'ın bir HTML öğesi olduğunu bilmesinin bir yolu yoktur. React'ın bir HTML öğesi olduğunu bildirmek için aşağıdakileri yapabilirsiniz -

Kaldır ''ve işe yarayacak
<Fragment>HTML öğesi döndürmek için kullanın .

— Amandeep Singh Ghai
kaynak

2

Bu soruya cevap vermiyor. İçeriğinin thisIsMyCopykendisi bir HTML dizesi değil JSX'dir. Yani tam anlamıyla JSX'i JSX'e yapıştırıyorsunuz.

— Antares42

Parçaları Preact'ta da bulabilirsiniz, ancak yalnızca X sürümünde ve üstünde.

— Nasia Makrygianni

-3

Eğer başka biri hala buraya inerse. ES6 ile html değişkeninizi şu şekilde oluşturabilirsiniz:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

— Harry
kaynak

2

ve dizenizdeki değişkenleri istiyorsanız, her {}dizeyi ve dizenin tamamını böyle bir biçimlendirmeye ({telephoneNumber} {email})

— sarmanız

2

Bu soruda sorulandan farklı. Sorudacopy copy copy strong copy bir dize var. JSX olarak var.

— YPCrumble

4

Bu ES6 değil JSX

— gztomas

-3

Bu HTML'yi ReactDOM'a şu şekilde de ekleyebilirsiniz:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

React belgelerindeki iki link link ve link2 faydalı olabilir.

— çayır
kaynak