क्या मैं ReactJS में मूल तत्व के बच्चों को स्थानांतरित कर सकता हूं?

Question

अगर मैं निम्न HTML है:

<div id="myreactcomponent"> 
    <h1>Headline</h1> 
    <p>Content</p> 
</div> 

और मैं #myreactcomponent div में एक ReactJS घटक को प्रारंभ, मैं किसी भी तरह h1 और घटक के अंदर पी तत्व प्रदान कर सकते हैं? कुछ ऐसा:

return (
    <Header></Header> 
    { place h1 and p here } 
    <Footer></Footer> 
); 

क्या इसके लिए ReactJS में कोई विकल्प है?

आप मेरी समस्या का प्रदर्शन देखने के लिए यह JSFiddle देख सकते हैं। मैं transclude विकल्प और प्रतिक्रिया में एक AngularJS निर्देश का <ng-transclude/> टैग खोज:

कोणीय से परिचित लोगों के लिए ।

पॉलिमर से परिचित लोगों के लिए: मैं प्रतिक्रिया में <content/> टैग के बराबर खोज करते हैं।

अद्यतन

मैं this.props.children संपत्ति कोशिश की, लेकिन जहाँ तक मैं समझता हूँ, यह केवल यदि प्रारंभिक एचटीएमएल एक प्रतिक्रिया घटक में पहले से ही है काम करता है। मुझे वास्तव में उस तत्व के बच्चों को प्रस्तुत करने की आवश्यकता है जिसे मैंने प्रारंभ में पहले संदर्भ घटक प्रस्तुत किया था।

अद्यतन 2

घटक (के रूप में update of the JSFiddle में दिखाया गया है) के प्रारंभ में HTML ले जाने के लिए नहीं मेरे मामले में एक विकल्प, विभिन्न प्रणालियों जो प्रारंभिक एचटीएमएल प्रस्तुत करना और घटकों प्रतिक्रिया की वजह से है ।

Answer 1

कुछ इस तरह .. ।

.. 
render(){ 
return (
<Header></Header> 
<span dangerouslySetInnerHTML={{__html:'content'}}></span> 
<Footer></Footer> 
) 
} 
.. 
var content = '<h1>This is a header</h1><p>This is some para..</p>' 

यह है कि क्या आप बात कर रहे हैं ... आप इस here बारे में पढ़ सकते है।

Answer 2

हां, यह this.props.children का उपयोग करने के लिए।

उदाहरण के लिए

, आप एक प्रतिक्रिया घटक इस तरह इस्तेमाल किया था, तो:

<MyReactComponent> 
    <h1>Headline</h1> 
    <p>Content</p> 
</MyReactComponent> 

आप बच्चे तत्वों हस्तांतरण कर सकते हैं h1 और p, MyReactComponent की render में ऐसा करने से:

return (
    <Header></Header> 
    { this.props.children } 
    <Footer></Footer> 
); 

Answer 3

हाँ यह संभव है।

प्रतिक्रिया वर्ग में आप this.props.children

माता पिता घटक में

तो है:

function render() { 
    return <MyComponent><div class="my-child">My text</div></MyComponent>; 
} 

तो बच्चे घटक में

function render() { 
    return <div class="child-wrapper">{this.props.children}</div>; 
} 

https://facebook.github.io/react/tips/children-props-type.html