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

Question

我正在尝试在每个标签标题上添加活动类，以便在单击时可以具有一些样式。但我不知道如何在这个组件上添加活动类，请告诉我一些解决方案，非常感谢所有帮助。

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-basic-tabs-component-react-typescript-231a2327f7b6

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 方法中检查当前索引是否 = 保持状态的索引。如果计算结果为 true，我们给 tabtitle 一个类，如果不是，我们给它另一个。

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

如果您想在树中较低的许多不同组件之间共享状态信息，您可能需要使用 React Context 提供程序和 useContext 挂钩进行检查。

我也不确定 item.props 是否可以这样工作？我可能错了？也许其他人会确认。

希望这有帮助。

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> ) 
}