मुझे एक ट्यूटोरियल मिला जहां नेविगेशन बार के लिंक const फ़ील्ड के अनुसार render() विधि के अंतर्गत प्रदर्शित होते हैं। जबकि कोड बहुत अच्छा काम करता है, मैं थोड़ा और करने की कोशिश कर रहा हूं।

यदि उपयोगकर्ता सुपर व्यवस्थापक है (मान लें), तो मैं superAdminLinks और साथ ही userLinks दोनों को प्रदर्शित करना चाहूंगा। मैंने कई चीजों की कोशिश की, लेकिन मैं इस बात को ठीक नहीं कर पा रहा हूं। किसी भी सहायता की सराहना की जाएगी। धन्यवाद!

मेरा render() कोड स्निपेट, नीचे जैसा दिखता है

render() {


            const isSuperAdmin = user.user_role === "SUPER_ADMIN";


            const userLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>UserLink1</li>
                    <li>UserLink2</li>
                </ul>
            )

            const superAdminLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>SuperAdminLink1</li>
                    <li><SuperAdminLink2</li>
                </ul>
            )

            return (
                    <header>
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-sm-3 col-md-2 sidebar">
                                 { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
                                </div>
                            </div>
                        </div>
                   </header>
            );
    }

यदि उपयोगकर्ता SuperAdmin है तो उपरोक्त कोड केवल SuperAdminLinks प्रस्तुत करता है। मैं SuperUser के लिए उपयोगकर्ता और सुपर व्यवस्थापक दोनों लिंक कैसे प्रस्तुत कर सकता हूं?

0
sanbhat 1 अप्रैल 2018, 22:02

3 जवाब

सबसे बढ़िया उत्तर
<div className="col-sm-3 col-md-2 sidebar">
   { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
   { isSuperAdmin && userLeftMenu  }
</div>
1
Subin Sebastian 1 अप्रैल 2018, 19:09
return (
   <header>
     <div className="container-fluid">
       <div className="row">
         <div className="col-sm-3 col-md-2 sidebar">
           { isSuperAdmin && superAdminLeftMenu }
           { isSuperAdmin && userLeftMenu }   
         </div>
       </div>
     </div>
   </header>
)
1
uladzimir 1 अप्रैल 2018, 19:11

आप React.Fragment का उपयोग कर सकते हैं:

const { render } = ReactDOM;

const role = "SUPER_ADMIN";

const App = () => {
  const isSuperAdmin = role === "SUPER_ADMIN";

  const userLeftMenu = (
    <React.Fragment>
      <li>UserLink1</li>
      <li>UserLink2</li>
    </React.Fragment>
  );

  const superAdminLeftMenu = (
    <React.Fragment>
      <li>SuperAdminLink1</li>
      <li>SuperAdminLink2</li>
      {userLeftMenu}
    </React.Fragment>
  );

  return (
    <header>
      <div className="container-fluid">
        <div className="row">
          <div className="col-sm-3 col-md-2 sidebar">
            <ul className="nav nav-sidebar">
              {isSuperAdmin ? superAdminLeftMenu : userLeftMenu}
            </ul>
          </div>
        </div>
      </div>
    </header>
  );
};

render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
2
Ori Drori 1 अप्रैल 2018, 19:13