reactjs - 如何在 reactjs 中创建类似于 Web 浏览器选项卡的选项卡部分?
问题描述
请帮我创建一个类似于网络浏览器选项卡的选项卡部分,这样当我打开一个页面时,它必须以选项卡格式打开,同时应该存在关闭、拖放选项卡等操作.
建议我任何现有的图书馆来解决这个问题。
解决方案
根据您的要求,我相信这就是您所需要的: https ://www.npmjs.com/package/react-draggable-tabs
import React, { Component } from "react";
import Tabs from "react-draggable-tabs";
import ReactDOM from "react-dom";
class App extends Component {
constructor(props) {
super(props);
this.moveTab = this.moveTab.bind(this);
this.selectTab = this.selectTab.bind(this);
this.closedTab = this.closedTab.bind(this);
this.addTab = this.addTab.bind(this);
this.state = {
tabs: [
{
id: 1,
content: "Cute Cat",
active: true,
display: (
<img
src="http://memecrunch.com/meme/RFHY/cute-cat/image.png"
alt="cute cat"
width="500px"
/>
)
},
{
id: 2,
content: (
<span>
<i className="fa fa-paw" aria-hidden="true" /> Cute Dog
</span>
),
display: (
<img
src="http://slappedham.com/wp-content/uploads/2014/06/Cute-White-Dog.jpg"
alt="cute dog"
width="500px"
/>
)
},
{
id: 3,
content: "Cute Duck",
display: (
<iframe
title="DuckDuckGo"
src="https://duckduckgo.com/"
style={{
border: "0",
margin: "50px",
width: "500px",
height: "800px"
}}
/>
)
}
]
};
}
moveTab(dragIndex, hoverIndex) {
this.setState((state, props) => {
let newTabs = [...state.tabs]
newTabs.splice(hoverIndex, 0, newTabs.splice(dragIndex, 1)[0]);
return { tabs: newTabs };
});
}
selectTab(selectedIndex, selectedID) {
this.setState((state, props) => {
const newTabs = state.tabs.map(tab => ({
...tab,
active: tab.id === selectedID
}));
return { tabs: newTabs };
});
}
closedTab(removedIndex, removedID) {
this.setState((state, props) => {
let newTabs = [...state.tabs];
newTabs.splice(removedIndex, 1);
if (state.tabs[removedIndex].active && newTabs.length !== 0) {
// automatically select another tab if needed
const newActive = removedIndex === 0 ? 0 : removedIndex - 1;
newTabs[newActive].active = true;
}
return { tabs: newTabs };
});
}
addTab() {
this.setState((state, props) => {
let newTabs = [...state.tabs];
newTabs.push({
id: newTabs.length + 1,
content: "Cute *",
display: <div key={newTabs.length + 1}>Cute *</div>
});
return { tabs: newTabs };
});
}
render() {
const activeTab = this.state.tabs.filter(tab => tab.active === true);
return (
<div>
<Tabs
moveTab={this.moveTab}
selectTab={this.selectTab}
closeTab={this.closedTab}
tabs={this.state.tabs}
>
<button onClick={this.addTab}>+</button>
</Tabs>
{activeTab.length !== 0 ? activeTab[0].display : ""}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
推荐阅读
- swift - 有没有办法让 SwiftUI 文本标签在显示计时器时不会轻微移动?
- javascript - FindDomNode 弃用警告,尽管使用了 ref
- java - 如何在不损坏的情况下将图像从 java 套接字服务器发送到导航器?
- laravel - 无法打开 laravel.log - ec2 Aws 中的权限错误
- u-boot - 错误:所选处理器不支持请求的专用寄存器
- swift - 检查 URL 是视频 URL 还是 PHOTO URL
- python - Template Does not exsist-heroku django
- scala - 类型参数 [T] 不符合方法产品的类型参数边界 [T <: Product]
- asp.net-mvc - How to use asp.net core 3.0 identity (Register & SignIn) for multiple UserName/Email with Different CompanyIDs
- animation - SVG + GSAP mask animation issue with Firefox