动态生成 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>
}
    

结论

使用动态函数创建组件是一种避免重复的有效模式。每当您发现自己在多个组件中重复相同的模式，或者考虑复制现有组件以进行小幅修改时，您都应考虑创建一个函数来为您动态生成这些组件。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文