如何开发可重复使用的类似Bootstrap的组件

Question

React引导程序和其他类似的引导程序库提供了类似的功能

import Modal from '...';

而CCD_ 1可以进一步分解为：

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 '...';

但是这种方法将导致CCD_ 3本身不可用。这是怎么回事？有人举个例子吗？

谢谢！

Answer 1

你可以用这种方法这样做：

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>

Answer 2

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

布局.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>
);
}