如何开发可重用的类 Bootstrap 组件答案

【问题标题】：How to develop Reusable Bootstrap-like Components如何开发可重用的类 Bootstrap 组件
【发布时间】：2022-06-28 11:00:15
【问题描述】：

React bootstrap 和其他类似的引导库提供类似的东西

import Modal from '...';

而Modal 可以进一步解压到：

const { Header, Title, Description } = Modal;

虽然Modal 本身就是一个包装器组件。

他们的用例示例如下：

<Modal someProps={someValues}>
  <Modal.Title>Some Title</Modal.Title>
  <Modal.Content>Some Content</Modal.Content>
</Modal>

如何开发这样的东西？

我最初的想法是这样的：

const Title = ({children}) => (<something>{children}</something>);

const Content = ({children}) => (<something>{children}</something>);

export {
  Title,
  Content,
};

====================

import Modal from '...';
--or--
import { Title, Content } from '...';

但是这种方法会导致Modal 无法单独使用。这是如何运作的？有人举个例子吗？

谢谢！

【问题讨论】：

标签： reactjs next.js frontend react-bootstrap es6-modules

【解决方案1】：

是的，这有点棘手，但我在这里。

布局.js

import "./layout.css";

const Layout = ({ children }) => {
  return <section>{children}</section>;
};

Layout.Header = ({ children }) => <header>{children}</header>;

Layout.Body = ({ children }) => <main>{children}</main>;

Layout.Footer = ({ children }) => <footer>{children}</footer>;

export default Layout;

App.js

import Layout from "./Layout";

export default function App() {
  return (
    <div className="App">
      <Layout>
        <Layout.Header>Header goes here</Layout.Header>
        <Layout.Body>Body goes here</Layout.Body>
        <Layout.Footer>Footer goes here</Layout.Footer>
      </Layout>
    </div>
  );
}

【讨论】：

您的示例不允许使用 ``` ... ```我想要的东西也可以使用 Components 并放入Title 和 Content 相应地放在正确的位置
是的，你说得对，这不是一个完整的解决方案，我会尽力回复你！
@AndreHadian 立即结帐。

【解决方案2】：

你可以用这种方法做到这一点：

export const Modal = ({children}) => {
 return(
  <div class="modal">{children}</div>
 )
}

export const Title = ({children}) => {
 return(
  <div class="title">{children}</div>
 )
}

export const Content = ({children}) => {
 return(
  <div class="content">{children}</div>
 )
}

// join into single object
var _default = Object.assign(Modal, {
 Title,
 Content
});

export default _default;

我们已经完成了? 现在您可以在两者中使用此组件（单个/单独导入）

import Modal from '...';
--or--
import { Modal, Title, Content } from '...';

<Modal someProps={someValues}>
  <Modal.Title>Modal Title</Modal.Title>
  <Modal.Content>Some Content</Modal.Content>
</Modal>
--or--
<Modal someProps={someValues}>
  <Title>Modal Title</Title>
  <Content>Some Content</Content>
</Modal>

【讨论】：