If, Else, Switch Örnekleri

React genel anlamda bir dom biçimlendiricisi denilebilir. Bir kaç farklı operatör pratiğini belirtmekte fayda var.

bir tab örneği

    constructor(props) {
        super(props)
        this.state = { activeTab: 2 };
    }

       return (

            <div>
                <div className="mdl-card mdl-shadow--1dp m-b-30">
                    <div className="mdl-card__title">
                        <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
                            <Tab>Stats</Tab>
                            <Tab>Location</Tab>
                            <Tab>Setting</Tab>
                        </Tabs>
                    </div>
                    <div className="demo-tabs">

                        <section>
                            <div className="content">
                            //if, else 
                                 {  this.state.activeTab === 2 ?  <AddCampaignForm /> : <StatsBoard /> }
                             //if, else
                                {content}
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        );

bir değişken kullanarak

        let content = null;
        const istab = this.state.activeTab;
        if (istab == 1) {
            content = <AddCampaignForm />;
        } else {
            content = "peh";
        }

bir switch yapısı ile

    switch (this.state.activeTab) {
        case 1:
            return <AddCampaignForm />
            break;
        case 2:
            return <AddCampaignForm2 />
            break;
        case 3:
            return <AddCampaignForm3 />
            break;
        default: null
    }

daha fazlası için

http://reactjs.cn/react/tips/if-else-in-JSX.html

https://www.npmjs.com/package/jsx-control-statements

Last updated

Was this helpful?