reactjs - 如何为 react-bootstrap 的活动选项卡切换 css 类?
问题描述
我正在尝试将自定义样式添加到活动选项卡,但不知道如何切换活动选项卡的样式类。
以下是我的代码:
import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
export default function App() {
const [key, setKey] = useState("first");
const ActiveStyle = {
textAlign: "center",
background: "white",
borderRadius: "2em",
padding: " 0.3em 1.5em",
letterSpacing: "0.2em"
};
const inActiveStyle = {
...ActiveStyle,
background: "transparent",
"border-color": "transparent",
color: "inherit"
};
return (
<div className="App">
<Container style={{ width: "auto" }}>
<Tab.Container activeKey={key} onSelect={key => setKey(key)}>
<Row style={{ padding: "1em 1em", background: "#EEEEEE" }}>
<Col>
<Nav.Link
eventKey="first"
style={key === "first" ? ActiveStyle : inActiveStyle}
>
<span style={{ fontSize: "larger" }}>Q&A </span>
</Nav.Link>
</Col>
<Col>
<Nav.Link
eventKey="second"
style={key === "second" ? ActiveStyle : inActiveStyle}
>
<span>Exams</span>
</Nav.Link>
</Col>
</Row>
<Tab.Content>
<Tab.Pane eventKey="first">
<Row style={{ height: "90vh" }}>
<p>TAB 1</p>
</Row>
</Tab.Pane>
<Tab.Pane eventKey="second">
<Row style={{ height: "90vh" }}>
<p>TAB 2</p>
</Row>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</Container>
</div>
);
}
解决方案
您可以使用状态来识别这样的活动选项卡(您可以重构它以满足您的需要)
推荐阅读材料是受控/不受控组件https://reactjs.org/docs/forms.html#controlled-components
import React, { useState } from "react";
import "./styles.css";
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
export default function App() {
const [key, setKey] = useState('first');
const ActiveStyle = {
textAlign: "center",
background: "white",
borderRadius: "2em",
padding: " 0.3em 1.5em",
letterSpacing: "0.2em"
};
const inActiveStyle = {
...ActiveStyle,
background: 'transparent',
'border-color': 'transparent',
'color': 'inherit'
};
return (
<div className="App">
<Container style={{ width: "auto" }}>
<Tab.Container activeKey={key} onSelect={key => setKey(key)}>
<Row style={{ padding: "1em 1em", background: "#EEEEEE" }}>
<Col>
<Nav.Link
eventKey="first"
style={ key === 'first' ? ActiveStyle : inActiveStyle}
>
<span style={{ fontSize: "larger" }}>Q&A </span>
</Nav.Link>
</Col>
<Col>
<Nav.Link eventKey="second" style={ key === 'second' ? ActiveStyle : inActiveStyle}>
<span>
Exams
</span>
</Nav.Link>
</Col>
</Row>
<Tab.Content>
<Tab.Pane eventKey="first">
<Row style={{ height: "90vh" }}>
<p>TAB 1</p>
</Row>
</Tab.Pane>
<Tab.Pane eventKey="second">
<Row style={{ height: "90vh" }}>
<p>TAB 2</p>
</Row>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</Container>
</div>
);
}
推荐阅读
- swift - 当“样式”不是“默认”时,为什么不使用按钮自定义字体?
- angular - 我想在不使用任何库的情况下使用 Angular 实现产品轮播功能
- bash - bash/shell - 如何获取 RHEL 上目录的组名并将其保存到变量中?
- typescript - 如何在 Electron 15 中将 webContents 声明为 TypeScript
- python - 如何将查询从远程数据库 mysql 复制到文件中
- google-forms - Google 表单能否生成另一个 Google 表单
- sql - 如何按包含 Presto 列表的列过滤数据框?
- php - Laravel 和 PostgreSQL 的行级安全性
- c# - 处理测试类中的依赖注入
- python - 自定义图像分割在不同的模型加载 Pixellib 上有不同的结果