प्रतिक्रिया में डायनामिक रूप से बच्चे के घटक जोड़ें

Question 1

मेरा लक्ष्य एक पृष्ठ / मूल घटक पर गतिशील रूप से घटकों को जोड़ना है।

मैंने इस तरह कुछ बुनियादी उदाहरण टेम्पलेट के साथ शुरुआत की:

main.js:

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));

App.js:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <div id="myId">myId div</div>
            </div>

        );
    }

});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component! </h1>
            </div>
        );
    }
});

यहां नोड पर SampleComponentमुहिम शुरू की गई <div id="myId"></div>है, जो App.jsटेम्पलेट में पहले से लिखा हुआ है। लेकिन क्या होगा अगर मुझे ऐप घटक में अनिश्चित संख्या में घटकों को जोड़ने की आवश्यकता है? जाहिर है कि मेरे पास वहां बैठे सभी जरूरी डिविजन नहीं हो सकते ।

कुछ ट्यूटोरियल पढ़ने के बाद भी मुझे इस बात की कोई समझ नहीं है कि घटकों को गतिशील रूप से कैसे बनाया और जोड़ा जाता है। इसे करने का एक तरीका क्या है?

Question 2

आपको अपने घटकों को बच्चों के रूप में पारित करने की आवश्यकता है, जैसे:

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
    <App>
        <SampleComponent name="SomeName"/> 
    <App>, 
    document.body
);

और फिर उन्हें घटक के शरीर में जोड़ दें:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                {
                    this.props.children
                }
            </div>
        );
    }
});

आपको मैन्युअल रूप से HTML कोड में हेरफेर करने की आवश्यकता नहीं है, रिएक्ट आपके लिए यही करेगा। यदि आप कुछ बाल घटकों को जोड़ना चाहते हैं, तो आपको बस सहारा बदलने की जरूरत है या यह निर्भर करता है। उदाहरण के लिए:

var App = React.createClass({

    getInitialState: function(){
        return [
            {id:1,name:"Some Name"}
        ]
    },

    addChild: function() {
        // State change will cause component re-render
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }

    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                {
                    this.state.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }

});

Question 3

सबसे पहले, मैं document.body का उपयोग नहीं करेगा । इसके बजाय एक खाली कंटेनर जोड़ें:

index.html:

<html>
    <head></head>
    <body>
        <div id="app"></div>
    </body>
</html>

तब केवल अपने <App />तत्व को प्रस्तुत करने का विकल्प चुनें :

main.js:

var App = require('./App.js');
ReactDOM.render(<App />, document.getElementById('app'));

भीतर App.jsआप अपने अन्य घटकों आयात और अनदेखा कर सकते हैं अपने डोम पूरी तरह से कोड प्रस्तुत करना:

App.js:

var SampleComponent = require('./SampleComponent.js');

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component!</h1>
                <SampleComponent name="SomeName" />
            </div>
        );
    }
});

SampleComponent.js:

var SampleComponent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Sample Component!</h1>
            </div>
        );
    }
});

तब आप किसी भी संख्या में घटकों के साथ प्रोग्राम कर उन्हें आवश्यक घटक फ़ाइलों का उपयोग करके आयात कर सकते हैं require।

Question 4

क्रिस के जवाब के आधार पर, यहां मेरे समाधान को साझा करना। आशा है कि यह दूसरों की मदद कर सकता है।

मुझे अपने जेएसएक्स में बाल तत्वों को गतिशील रूप से जोड़ने की आवश्यकता थी, लेकिन मेरे रिटर्न स्टेटमेंट में सशर्त जांच की तुलना में सरल तरीके से। मैं इस मामले में एक लोडर दिखाना चाहता हूं कि बाल तत्व अभी तक तैयार नहीं हैं। यह रहा:

export class Settings extends React.PureComponent {
  render() {
    const loading = (<div>I'm Loading</div>);
    let content = [];
    let pushMessages = null;
    let emailMessages = null;

    if (this.props.pushPreferences) {
       pushMessages = (<div>Push Content Here</div>);
    }
    if (this.props.emailPreferences) {
      emailMessages = (<div>Email Content Here</div>);
    }

    // Push the components in the order I want
    if (emailMessages) content.push(emailMessages);
    if (pushMessages) content.push(pushMessages);

    return (
      <div>
        {content.length ? content : loading}
      </div>
    )
}

अब, मुझे लगता है कि मैं भी बस {pushMessages}और {emailMessages}सीधे अपने return()नीचे रख सकता हूं , लेकिन मुझे लगता है कि मेरे पास और भी अधिक सशर्त सामग्री थी, मैं return()बस अव्यवस्थित दिखूंगा।

Question 5

सबसे पहले एक चेतावनी: आपको रिएक्ट द्वारा प्रबंधित डोम के साथ कभी छेड़छाड़ नहीं करनी चाहिए, जिसे आप कॉल करके कर रहे हैं ReactDOM.render(<SampleComponent ... />);

React के साथ, आपको मुख्य ऐप में सीधे नमूना.कॉम का उपयोग करना चाहिए।

var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);

आपके घटक की सामग्री अप्रासंगिक है, लेकिन इसका उपयोग इस तरह किया जाना चाहिए:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <SampleComponent name="SomeName"/>
            </div>
        );
    }
});

फिर आप किसी सूची का उपयोग करने के लिए अपने एप्लिकेशन घटक का विस्तार कर सकते हैं।

var App = React.createClass({
    render: function() {
        var componentList = [
            <SampleComponent name="SomeName1"/>,
            <SampleComponent name="SomeName2"/>
        ]; // Change this to get the list from props or state
        return (
            <div>
                <h1>App main component! </h1>
                {componentList}
            </div>
        );
    }
});

मैं वास्तव में सिफारिश करूंगा कि आप रिएक्ट डॉक्यूमेंटेशन देखें और फिर "गेट स्टार्टेड" निर्देशों का पालन करें। आप जिस समय पर खर्च करेंगे, बाद में भुगतान करेंगे।

https://facebook.github.io/react/index.html