Bölünemez boşluklarla ReactJS oluşturma dizesi

90

& Gibi karakterler içerebilen bir dizeye sahip bazı sahne öğelerim var. Ayrıca boşluklar içerir. Tüm boşlukları ile değiştirmek istiyorum  .

Bunu yapmanın kolay bir yolu var mı? Bu sözdizimini kullanarak sadece render edemeyeceğimi unutmayın:

<div dangerouslySetInnerHTML={{__html: myValue}} />

çünkü ilk önce herhangi bir HTML varlığını işaretleriyle değiştirmem gerekirdi. Bunu yapmak zorunda kalmak istemiyorum, çok düşük seviyede görünüyor.

Bunu yapmamın bir yolu var mı?

html reactjs

— Jack Allan
kaynak

1

bu neden tepki ile ilgili?

— Marcelo Bezerra

1

Ne yapmak istediğiniz tam olarak belli değil. Eğer istiyor musunuz sadece tüm boşlukların yerine &nbspl;tam anlamıyla ekran HTML etiketleri istediğinizde veya orada bir şey yapmak istediğiniz başka bir do?

— Bojangles

Ne zaman myValue erişilebilir olduğuna bağlıdır . Uygun yaşam döngüsü işlevinde bekleyebilir, ayrıştırabilir ve parsedçoklu ayrıştırmayı önleyen bir bayrak ayarlayabilirsiniz .

— David Hellsing

işlemek istiyorsanız & nbsp; react ile doma kaçmadıysanız, dangerouslySetInnerHTMLyöntemi kullanmanız gerekecek . Boşlukları & nbsp; ile değiştirerek bir dize oluşturmak için javascript kullanabileceğinizden, bunun tam olarak bir yolunu göremiyorum ancak dangerouslySetInnerHTMLyöntemi kullanmadan reaksiyonla bunlardan kaçılacaktır.

— Mike Driver

238

 HTML varlığını kullanmak yerine,  (U + 00A0 KIRILMAYAN ALAN) 'a atıfta bulunan Unicode karakterini kullanabilirsiniz :

<div>{myValue.replace(/ /g, "\u00a0")}</div>

— Sophie Alpert
kaynak

3

Lütfen yukarıda kullandığınız unicode karakterinin, kimlik avı düzenleri tarafından kötüye kullanılması nedeniyle tarayıcılar tarafından kara listeye alındığını unutmayın. Bakınız kb.mozillazine.org/Network.IDN.blacklist_chars

— Perry Tew

2

@BenAlpert İyi nokta. Evet. Çok güzel bir nokta. Bildiğim kadarıyla sadece IDN adresleri.

— Perry Tew

basit ama etkili. thx @BenAplert 3 yıl sonra bile.

— YASH DAVE

Bu benim için başka hiçbir şey yapmadığında çalıştı. Yardım için teşekkürler!

— davidawad

2

Bu kara liste, HTML kodu için değil, alan adları için geçerlidir.

— JW.

35

Bunun eski bir soru olduğunu biliyorum ve bu tam olarak istediğiniz şeyi yapmıyor, ancak dizeyi düzenlemek yerine, elde etmek istediğiniz şey muhtemelen CSS white-space: nowrapözelliği kullanılarak daha iyi çözülür :

Html olarak:

<div style="white-space: nowrap">This won't break lines</div>

Tepki olarak:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>

— Adrian Macneil
kaynak

Teşekkür ederim! Bu daha iyi cevap. Ve benim durumumda (kaydırmak istemiyorum ama aynı zamanda tek satırda da istemiyorum), {content: ''; white-space: normal}

— chad steele

0

Güzel bir xml görüntülemek istiyorsanız:

var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
    <div dangerouslySetInnerHTML={{__html: str}} ></div>
)

— Tommy
kaynak

0

Kaybolmadan buraya yazmak çok zor, bu yüzden herkesin görebilmesi için biraz boşluk ekliyorum. Bu <nbsp /> etiketinden beyaz boşluğu kaldırırsanız, React'te bölünemez bir boşluk kullanabilirsiniz.

React, bu JSX etiketini bölünemez bir alana çevirir. Garip tuhaflık: Bu da boşluk bırakmak istediğiniz metinle aynı satırda kullanılmalıdır. Ayrıca, bu etikete sahip bölünemez boşluklar React'te istiflenmez.

— Ryan Berdel
kaynak

Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

— Çalışmıyor

0

Dizeler arasındaki boşluğu kaldırmak için aşağıdaki kod benim için çalışıyor. örneğin: "afee gg" sonuç: "afeedd"

{myValue.replace (/ \ s + / g, '')}

— Raj
kaynak

-4

Yani "Merhaba dünya" gibi bir değeriniz var ve biz de içinde olduğunu söyleyeceğiz this.props.value.

Bunu yapabilirsiniz:

var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
  // add the string
  array.push(<span key={i * 2}>{parts[i]}</span>);
  // add the nbsp
  array.push(<span key={i * 2 + 1}>&nbsp;</span>);
}

// remove the trailing nbsp
array.pop();

return <div>{array}</div>;

jsbin

— Brigand
kaynak