Javascript 如何使用React筛选表？

我试图通过数组进行过滤，以便在单击某个选项卡时，只显示这些结果。我已经设法分离出我想要保留的某些变量，但其他不符合标准的变量仍然保留。如何让filter方法在页面上实际呈现，以便显示结果。我已经搜索了好几个小时，试图找到tbody并进行排序，但我只是感到困惑，因为我对javascript和react基本上是新手。有人能给我指出正确的方向吗

Filter Method

const tbody = document.getElementsByTagName('tbody')
    console.log(tbody)
    //change active class
    function addTabBackground() {
        const tabs = document.querySelectorAll('[data-tab]')

        window.onload = function () {
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    if (tab.getAttribute('data-tab') === 'gains') {
                        listOfOptions.map(option => {
                            console.log(option.totalProfit)
                        })
                    }
                    tabs.forEach(tab => {
                        tab.classList.remove('active')
                    })
                    tab.classList.add('active')
                })
            })
        }

    }

<div className="outputs" >
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Stock Name</th>
                            <th>Price Of Option</th>
                            <th>Number Of Options</th>
                            <th>Total Amount Spent</th>
                            <th>Option Sold At</th>
                            <th>Amount Of Options Sold</th>
                            <th>Proft</th>
                        </tr>
                    </thead>
                    {listOfOptions.map(option => {
                        return (
                            <tbody>
                                <tr>
                                    <td>{option.clock}</td>
                                    <td>{option.name.toUpperCase()}</td>
                                    <td>${option.price}</td>
                                    <td>{option.amountOfOptions}</td>
                                    <td>${option.totalAmountSpent.toFixed(2)}</td>
                                    <td>${option.optionPriceSoldAt}</td>
                                    <td>{option.amountOfOptionsSold}</td>
                                    <td style={{ color: option.totalProfit >= 0 ? 'green' : 'red' }}>${option.totalProfit.toFixed(2)}</td>
                                </tr>
                            </tbody>
                        )
                    })}
                </table>
            </div>

过滤方法
const tbody=document.getElementsByTagName（'tbody'）
控制台日志（tbody）
//更改活动类
函数addTabBackground（）{
const tabs=document.querySelectorAll（“[data tab]”）
window.onload=函数（）{
tabs.forEach（tab=>{
tab.addEventListener（'单击'，（）=>{
如果（tab.getAttribute（'data-tab'）=='gains'）{
list of options.map（选项=>{
console.log（option.totalProfit）
})
}
tabs.forEach（tab=>{
tab.classList.remove（'active'）
})
tab.classList.add（'active'）
})
})
}
}
日期
股票名称
期权价格
选择的数量
支出总额
期权出售价格
出售期权的金额
Proft
{listOfOptions.map（选项=>{
返回(
{option.clock}
{option.name.toUpperCase（）}
${option.price}
{option.amountOfOptions}
${option.TotalAmountSpeed.toFixed（2）}
${option.optionPriceSoldAt}
{option.amountofoptionssell}
=0？'green'：'red'}>${option.totalProfit.toFixed（2）}
)
})}

从评论中假设您有一些模糊的东西：

function Page() {
  return (
    <>
      <Navbar />
      <Table />
    </>
  )
}

您的Navbar组件应该有一个onClick处理程序，当活动选项卡更改时，它在该处理程序中调用setActiveTab函数

然后在表组件中，您应该有如下内容：

function Table({ activeTab }) {
  return (
   <table>
    ...
   {listOfOptions
     .filter(option => /* something depending on the activeTab */)
     .map(option => <... />)
   }
  </table>
}

函数表（{activeTab}）{
返回(
...
{选项列表
.filter（选项=>/*取决于activeTab*/）
.map（选项=>）
}
}

您正在与React抗争。与其捣乱DOM，不如使用

onClick

道具，在JSX中动态计算道具，并根据状态有条件地渲染整行。您好@coreyward，谢谢您的回答，但您能否更深入地解释一下。我将如何进行此操作？您能否澄清选项卡被呈现？它们也是react组件吗？或者这是一个带有一些原始html元素与react组件混合的遗留应用程序？@AnthonyGarcia Labiad Hi，它们是一个react组件。它们存储在一个名为navbar的组件中。因此，在这个函数中，您将使用filter，然后通过filter的答案进行映射。然后，这将呈现到页面.

function Table({ activeTab }) {
  return (
   <table>
    ...
   {listOfOptions
     .filter(option => /* something depending on the activeTab */)
     .map(option => <... />)
   }
  </table>
}