ReactLayoutを使用してXMLデータをレンダリング

Question

PhoneCallResponseのXMLデータは、生成されたHMTLには表示されません。
おそらくReactがそのコンポーネントにXMLを使用しているからです。

これを処理する特別な方法はありますか？

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（XMLではない！）のリアクション理由：タグの先頭の大文字はReactコンポーネントを示します。小文字のタグは、後で計算することなくDOM要素としてまっすぐにレンダリングされます。 Reactは一日の終わりに、XMLではなくHTMLビューをレンダリングします。

コードでは、レスポンス、セイ、ポーズのいずれも定義されていないため、参照エラーが発生します。その理由は、Reactが何かをする前にJSXを蒸散させる方法です。大文字のJSXタグはコンポーネントとして扱われます。したがって<Response></Response>はReact.createElement(Response, {}, null)に変換され、Responseがスコープ内の有効なReactコンポーネントでない場合、javascriptエンジンはエラーになり、すべてがクラッシュします。であるあなたがHTMLでXMLを混合を主張、またはあなたの目標は、XMLドキュメントをレンダリングすることです、そして、小文字のタグを使用するか、dangerouslySetInnerHTML場合は文字列として扱われ、反応する小文字のタグは単にHTMLタグ<response></response>

をレンダリングしますDOMに文字列を注入するリアクション方法しかし、HTML5はXHTMLのようなXMLではなく、XHTMLは多かれ少なかれ死んでいることに注意してください。標準準拠のカスタムタグは、最近のタグでは名前の衝突を避けるため、<x-custom-tag>、<x-another-custom-tag>などのパターンに従っています。

注：Reactは、HTML5カスタム要素とシャドーDOMでうまく機能します。残念ながら、このHTML標準のこの部分は非常に「進行中の作業」であり、使用できる状態から離れていることは明らかですが、Chromeのバージョン49では、この例では一般的なアイデアを示す必要があります：https://jsfiddle.net/dannyjolie/je8pmazk/