自动更改 React Bootstrap 组件的位置

2020-11-09 08:00飞浪

介绍

在 React.js 中设计和开发前端界面时，您会遇到需要在用户单击或悬停在某个项目上时显示信息的情况。弹出窗口是此场景的有用工具。它类似于工具提示，但不同之处在于弹出窗口可以提供更多内容。

在本指南中，您将学习如何创建弹出窗口组件。您还将学习如何动态更新弹出窗口的位置。本指南中使用的弹出窗口组件来自 React Bootstrap。本指南假设您具有 React.js 的基本（初学者级别）知识。

继续并设置您的应用程序。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-dynamic-popover

cd react-dynamic-popover

npm start

在你的基本 React 应用程序中包括 React Bootstrap。

      npm install react-bootstrap bootstrap

在您的app.js文件中，也包含样式表。

      import 'bootstrap/dist/css/bootstrap.min.css';

您现在可以导入引导组件，例如：

      import { Button } from 'react-bootstrap';
    

创建 PopOver

复制下面的示例代码。

      const popover = (
    <Popover id="popover-basic">
        <Popover.Title as="h3">Popover</Popover.Title>
        <Popover.Content>
            Hello popover
        </Popover.Content>
    </Popover>
);

function App() {
    return (
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
        <Button variant="success">Click here</Button>
    </OverlayTrigger>
);
}
export default App
    

叠加层是工具提示和弹出窗口的基本组件。叠加层增加了对过渡和切换可见性的支持。上面的代码创建了一个简单的弹出窗口，当用户单击按钮时会弹出。您可以根据自己的喜好通过 placement 属性将弹出窗口组件放置在不同的位置，即top、bottom等。

在下一个示例中，您将创建一个根据内容变化重新定位的弹出窗口。

继续复制下面的示例代码。

      const UpdatingPopover = React.forwardRef(
    ({ popper, children, show: _, ...props }, ref) => {
        useEffect(() => {
            console.log('updating!');
            popper.scheduleUpdate();
        }, [children, popper]);

        return (
            <Popover ref={ref} content {...props}>
                {children}
            </Popover>
        );
    },
);

const description = `
  'React is an open-source, front end, JavaScript library for building user interfaces or UI components.
      It is maintained by Facebook and a community of individual developers and companies.'
`;
const summary = 'React is Cool';

function App() {
    const [content, setContent] = useState(summary);

    useEffect(() => {
        const timerId = setInterval(() => {
            setContent(content === summary ? description : summary);
        }, 3000);

        return () => clearInterval(timerId);
    });

    return (
        <OverlayTrigger
            trigger="click"
            placement="bottom"
            overlay={
                <UpdatingPopover id="popover-contained">{content}</UpdatingPopover>
            }
        >
            <Button>click me</Button>
        </OverlayTrigger>
    );
}
    

每次大小更改时，让弹出窗口重新定位需要手动输入。在这种情况下，React Bootstrap 提供了一个名为scheduleUpdate的漂亮函数，它与popper prop 配合使用。覆盖组件使用此方法来重新定位自身。

在我们的示例中，单击按钮后，弹出窗口会在三秒间隔后更新内容。然后，您将要呈现的内容从UpdatingPopover中的父组件传递到其子Popover 。这是通过 React 的forwardRef实现的。您可以在React.js 网站了解有关转发 refs 的更多信息。在函数UpdatingPopover中，您还将popper prop 和 ref 传递给Popper组件，该组件在我们的页面上呈现。为了更好地理解这种方法，示例代码提供了每次在 popper 中更新内容时的日志。

结论

本指南可帮助您进一步提高作为开发人员的前端技能。若要进一步了解此主题，请查看React-Bootstrap 网站上的更多组件。

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

_查看原文

曝光30120浏览1588