गतिशीलভাবে প্রতিক্রিয়াতে শিশু উপাদান যুক্ত করুন components

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>

        );
    }

});

নমুনা কম্পোনেন্ট.জেএস:

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>
        );
    }
});

আপনাকে ম্যানুয়ালি এইচটিএমএল কোড ম্যানিপুলেট করার দরকার নেই, প্রতিক্রিয়া আপনার জন্য এটি করবে। আপনি যদি কিছু সন্তানের উপাদান যুক্ত করতে চান তবে আপনার কেবল প্রপস পরিবর্তন করতে হবে বা এটি নির্ভর করে তা উল্লেখ করতে হবে। উদাহরণ স্বরূপ:

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

প্রথমত, আমি ডকুমেন্ট.বডি ব্যবহার করব না । পরিবর্তে একটি খালি ধারক যুক্ত করুন:

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 ... />);

প্রতিক্রিয়া সহ, আপনি সরাসরি অ্যাপ্লিকেশন মধ্যে নমুনা কম্পোনেন্ট ব্যবহার করা উচিত।

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