मुझे निम्नलिखित घटक संरचना की आवश्यकता है:

import Layout from "./components/Layout";
<Layout>
   <Layout.Header>...</Layout.Header>
   <Layout.Body>...</Layout.Body>
   <Layout.Footer>...</Layout.Footer>
</Layout>

मैंने इसे निम्नानुसार हासिल करने की कोशिश की:

import React from "react";

const Layout = (props) => {
  return <div className="layout">{props.children}</div>;
};

const Header = (props) => {
  return <header className="layout__header">{props.children}</header>;
};

const Body = (props) => {
  return <div className="layout__body">{props.children}</div>;
};

const Footer = (props) => {
  return <footer className="layout__footer">{props.children}</footer>;
};

export { Header, Body, Footer };
export default Layout;

लेकिन ये काम होता नहीं दिख रहा है. क्या कोई मुझे बता सकता है कि इन कार्यों को सही तरीके से कैसे निर्यात किया जाए ताकि मैं उपरोक्त संरचना का उपयोग कर सकूं?

0
Robbert 20 पद 2020, 16:55

2 जवाब

सबसे बढ़िया उत्तर

इस जवाब के लिए धन्यवाद

const Layout = (props) => {
  return <div className="layout layout--green">{props.children}</div>;
};

const Header = (props) => {
  return <header className="layout__header">{props.children}</header>;
};

const Body = (props) => {
  return <div className="layout__body">{props.children}</div>;
};

const Footer = (props) => {
  return <footer className="layout__footer">{props.children}</footer>;
};

Layout.Header = Header;
Layout.Body = Body;
Layout.Footer = Footer;

export default Layout;
0
Robbert 20 पद 2020, 17:17

जिस तरह से आपने घटकों को निर्यात किया है, वह अच्छा दिखता है लेकिन आपको इस तरह के मॉड्यूल आयात नहीं करना चाहिए:

import Layout from "./components/Layout";
<Layout>
   <Layout.Header>...</Layout.Header>
   <Layout.Body>...</Layout.Body>
   <Layout.Footer>...</Layout.Footer>
</Layout>

आपको इसे नीचे की तरह आयात करना चाहिए:

import Layout, { Body, Footer, Header } from "./components/Layout";
<Layout>
  <Header />
  <Body />
  <Footer />
</Layout>
0
SWATI PRIYA 20 पद 2020, 17:33