在react Tab组件上设置每个活动的className

Question

我试图在每个tabtitle上添加活动类，以便在单击时可以有一些样式。但是我不知道如何在这个组件上添加活动类，请告诉我一些解决方案，我真的很感谢所有的帮助。

App.tsx

import React from "react"
import Tabs from "../Tabs"
import Tab from "../Tabs/Tab"
function App() {
return (
<Tabs>
<Tab title="Lemon">Lemon is yellow</Tab>
<Tab title="Strawberry">Strawberry is red</Tab>
<Tab title="Pear">Pear is green</Tab>
</Tabs>
)
}

Tabs.tsx

import React, { ReactElement, useState } from "react"
import TabTitle from "./TabTitle"
type Props = {
children: ReactElement[]
}
const Tabs: React.FC<Props> = ({ children }) => {
const [selectedTab, setSelectedTab] = useState(0)
return (
<div>
<ul>
{children.map((item, index) => (
<TabTitle
key={index}
title={item.props.title}
index={index}
setSelectedTab={setSelectedTab}
/>
))}
</ul>
{children[selectedTab]}
</div>
)
}
export default Tabs

Tabtitle.tsx

import React, { useCallback } from "react"
type Props = {
title: string
index: number
setSelectedTab: (index: number) => void
}
const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {
const onClick = useCallback(() => {
setSelectedTab(index)
}, [setSelectedTab, index])
return (
<li>
<button onClick={onClick}>{title}</button>
</li>
)
}
export default TabTitle

Tab.tsx

import React from 'react'
type Props = {
title: string
}
const Tab: React.FC<Props> = ({ children }) => {
return <div>{children}</div>
}
export default Tab

来源如下。https://medium.com/weekly - webtips/create基本标签-组件-反应-打印稿- 231 a2327f7b6

Answer 1

所以我个人会做的是:

<TabTitle
key={index}
title={item.props.title}
click={() => setSelectedTab(index)}
selected = (selectedTab === index)
/>

和

const TabTitle: React.FC<Props> = ({ key, title, click, selected}) => {
return (
<li className={selected ? "shiny" : "not-shiny"} key={key}>
<button onClick={click}>{title}</button>
</li>
)
}

这样，我们就不需要担心从tabTitle一直向上传递索引，我们可以简单地给它一个函数来触发预先填充的变量(我们已经在map方法中访问了它们!)

至于实际传递关于选项卡是否被选中的信息，我们可以简单地在map方法中检查当前索引是否=处于状态的索引。如果this的值为true，则给tabtitle一个类，如果不是，则给它另一个类。

注意，有很多不同的方法可以实现这一点，这只是我想到的第一个。

如果你想在树中较低的许多不同组件之间共享状态信息，你可能需要使用React上下文提供程序和useContext钩子。

我也不确定项目。道具就是这样工作的??也许我错了?也许别人会确认的。

希望对大家有帮助。

Answer 2

import React from "react" 
import Tabs from "../Tabs" 
import Tab from "../Tabs/Tab" 
function App() { 
return ( <Tabs> 
<Tab title="Lemon">Lemon is yellow</Tab> 
<Tab title="Strawberry">Strawberry is red</Tab> 
<Tab title="Pear">Pear is green</Tab> 
</Tabs> ) 
}