动态生成 React-Bootstrap 组件
介绍
假设您正在创建一个新的 React-Bootstrap 页面，并意识到您需要使用与现有组件略有不同的组件。有几种不同的方法可以做到这一点。
根据具体情况，现有组件可以参数化以支持新功能。这在某些情况下是可行的，但它通常会导致组件具有许多难以维护的不匹配功能。另一种选择是简单地复制和粘贴现有组件。如果共享功能只会在两个组件中重复，这可能是有意义的。但如果功能将在三个或更多组件中重复，这不是一个很好的解决方案。
这就是动态生成组件的作用所在。由于 React 允许您使用简单函数作为组件，并且 JavaScript 支持一等函数，因此可以创建一个动态生成新组件的函数。
在此示例中，将使用React-Bootstrap <Toast>元素。
import React from 'react';
import Toast from 'react-bootstrap/Toast';
import Container from 'react-bootstrap/Container';
function ErrorToast() {
return (
<Toast>
<Toast.Header>Error</Toast.Header>
<Toast.Body>Something went wrong.</Toast.Body>
</Toast>
);
}
export default function App() {
return <Container>
<ErrorToast />
</Container>
}
这个新的<ErrorToast>元素将创建一个具有预设标头和正文的新 React-Bootstrap <Toast>元素。如果您想创建<WarningToast>或<NotifyToast>怎么办？理想情况下，您不需要复制整个组件来修改预设文本。
创建动态组件生成器
第一步是创建一个返回函数组件的函数。
import React from 'react';
import Toast from 'react-bootstrap/Toast';
function createToast() {
return () => (
<Toast>
<Toast.Header>Error</Toast.Header>
<Toast.Body>Something went wrong.</Toast.Body>
</Toast>
);
}
此功能将允许您创建一个ErrorToast组件。
const ErrorToast = createToast();
显然，除非createToast函数更新以接受一些参数，否则这不会带来太多好处。
import React from 'react';
import Toast from 'react-bootstrap/Toast';
function createToast({ header }) {
return () => (
<Toast>
<Toast.Header>{ header }</Toast.Header>
<Toast.Body>Something went wrong.</Toast.Body>
</Toast>
);
}
如果您只想创建具有不同标题的组件，那么这很好，但是<Toast.Body>组件怎么办？您可以像header一样传递一个值，但是如果您希望每个 toast 实例的正文都不同怎么办？这可以通过两种方式之一完成。toast 元素可以接受属性，也可以使用 children属性来使用嵌套在元素下的任何元素或文本。
import React from 'react';
import Toast from 'react-bootstrap/Toast';
function createToast({ header }) {
return ({ children }) => (
<Toast>
<Toast.Header>{ header }</Toast.Header>
<Toast.Body>{ children }</Toast.Body>
</Toast>
);
}
现在，使用此函数创建的任何元素的任何子元素都将嵌套在<Toast.Body>元素下。
最后要添加到组件的是一些本地状态。React-Bootstrap <Toast>组件有一个show属性，允许它被隐藏，还有一个onClose属性，当单击关闭按钮时会调用该属性。
import React, { useState } from 'react';
import Toast from 'react-bootstrap/Toast';
function createToast({ header }) {
const [show, changeShow] = useState(true);
return ({ children }) => (
<Toast show={show} onClose={() => changeShow(false)}>
<Toast.Header>{ header }</Toast.Header>
<Toast.Body>{ children }</Toast.Body>
</Toast>
);
}
这样就可以让祝酒辞消失了。
使用动态组件生成器
现在您已经创建了createToast函数，可以使用它来创建新的组件。
const ErrorToast = createToast({ header: "Error" });
const WarningToast = createToast({ header: "Warning" });
使用 Toast 组件
创建这些组件后，下面介绍它们在 UI 中的使用方式。
import React from 'react';
import Container from 'react-bootstrap/Container';
export default function App() {
return <Container>
<ErrorToast>Something went wrong.</ErrorToast>
<WarningToast>You shouldn't do that.</WarningToast>
</Container>
}
结论
使用动态函数创建组件是一种避免重复的有效模式。每当您发现自己在多个组件中重复相同的模式，或者考虑复制现有组件以进行小幅修改时，您都应考虑创建一个函数来为您动态生成这些组件。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~