XML verilerini ReactLayout ile oluşturma

Question

PhoneCallResponse'daki XML verileri, oluşturulan HMTL'de görünmez.
Muhtemelen React, bileşenleri için XML kullanıyor olduğundan.

Bunu işlemenin özel bir yolu var mı?

PhoneCallResponse = React.createClass({ 
    render() { 
     return (
      <Response> 
       <Say voice="alice"> 
        Thanks for the call. Configure your number's voice U R L to change this message. 
       </Say> 
       <Pause length="1"/> 
       <Say voice="alice"> 
        Let us know if we can help you in any way during your development. 
       </Say> 
      </Response> 
     ); 
    } 
}); 


FlowRouter.route('/twilio/', { 
    action: function() {  
     ReactLayout.render(Layout, { 
      content: <PhoneCallResponse /> 
     }); 
    } 
}); 

Answer 1

JSX ile nedenlerini (! XML değil) bu şekilde tepki: etiketinin başında Sermaye harfi bir bileşen Tepki gösterir. Küçük harf etiketleri, daha fazla hesaplama yapılmadan DOM öğeleri olarak düz hale getirilir. Günün sonunda React, XML değil HTML görünümleri oluşturur. Yanıt, Yanıtlama veya Duraklatma tanımlanmayan bileşenler olduğundan, kodunuz referans hatasına neden olacaktır. Nedeni, JSX'in React'ın hiç bir şey yapmadan önce gönderilme şeklidir: Büyük harfli JSX etiketleri bileşen olarak değerlendirilir. Bu nedenle <Response></Response>, React.createElement(Response, {}, null)10'a dönüştürülecektir ve Response kapsamda geçerli bir Yanıt bileşeni değilse, javascript motoru şikayet edecek ve her şey çökecektir. Küçük harf etiketler Ancak dizge olarak ele ve HTML'nizde ile XML karıştırma ısrar veya hedef ardından, bir XML belgesi işlemek olan küçük etiketleri veya dangerouslySetInnerHTML kullanmak ise sadece bir HTML etiketini <response></response>

hale getirecek Tepki edilir DOM'da dizeleri enjekte etme yolu. Bununla birlikte, HTML5'in XHTML olduğu ve XHTML'nin az ya da çok ölü olduğu şekilde XML olmadığını unutmayın. Bu günlerde standart uyumlu özel etiketler, <x-custom-tag>, <x-another-custom-tag> modellerini ve benzerlerini takip ederek, gelecekteki bir HTML standardında yeni etiketlerin neden olabileceği herhangi bir isim çarpışmasından kaçınmanızı sağlamak için.

Bir yan notta: React HTML5 özel öğeleri ve gölge DOM ile iyi oynatılır. Ne yazık ki, HTML standardının bu kısmı çok "devam eden bir çalışma" ve kullanıma hazır olmanın hemen hemen ötesinde bir mil. Ancak, bu versiyon Chrome'un 49 sürümünden itibaren şu genel fikre sahip olmalı: https://jsfiddle.net/dannyjolie/je8pmazk/.