自动更改 React Bootstrap 组件的位置
介绍
在 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 网站上的更多组件。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~