Javascript 如何在react中获得jsx属性的值

下面是我的代码，我想比较我的状态是否等于某个jsx属性。你怎么能把它排成一行呢

import React, { useState } from "react";

const AccessCriteriaForm = () => {
  const [active_tab_id , set_active_tab] = useState("home-tab")
  return (
    <>
      <div className={`tab `+ (active_tab_id=="/**get the value of data-tab atribute */")?"show":"" } data-tab="home-tab" >Hi there</div>
    </>
  )
}

import React，{useState}来自“React”；
常量AccessCriteriaForm=（）=>{
const[active\u tab\u id，set\u active\u tab]=useState（“主选项卡”）
返回(
你好
)
}

您需要通过注入react

ref

来获取

div

的属性，您可以在react

ref

文档中找到更多详细信息：

为什么不直接检查该值？active_tab_id==“home tab”True，这很有用。我想我是想得太多了，但无论如何，这是可能的吗？你真的需要使用数据属性吗？在DOM中存储关于您的应用程序状态的数据是我认为是反模式的一种东西——您可以将其存储为道具或状态而不将其存储在DOM中，因此除非您试图集成需要它的遗留库，否则我会避免它（并且在这样的情况下，通常会有现成的版本）。