找到包含某個 class 名稱的組件 react js

Question

從包含特定 class 名稱的組件列表中查找組件。 在我的例子中，我想顯示具有類名“bbb”的組件。 但我似乎找不到類名。 在下面的代碼中，我用組件的名稱做了我的例子，這樣我就可以更好地展示我想要實現的目標：

import React, { useState, useEffect } from 'react';

const Test = () => {

  const One = () => {
    return (
      <h1 className='aaa' >one</h1>
    )
  }
  const Two = () => {
    return (
      <h1 className='bbb' >two</h1>
    )
  }
  const Three = () => {
    return (
      <h1 className='ccc' >Three</h1>
    )
  }

  const [data, setdata] = useState([<One />, <Two />, <Three />])

  return (
    <section>
      {data.filter(x => x.type.name === 'One').map(x => {
      // something like this line below. This doesn't work of course
      // {data.filter(x => x.classList.contains('bbb)).map(x => {
        return <div>{x}</div>
      })}
    </section>
  )
};

export default Test;

我真的是 React js 的新手，如果這是一個愚蠢的問題，我很抱歉。

編輯：修正了一個錯字

Answer 1

您可以這樣做，而不是為該過濾器查找 class 名稱。

我更改中的 2 個關鍵事項：

const [data, setdata] = useState([One, Two, Three])你不應該調用<One/> （在鈎子下，它調用React.createElement(One)來渲染那個組件）

data.filter((Component) => Component === Two)檢查組件引用而不是 class 名稱，因為 class 名稱可能會更改，這會導致您的邏輯出現錯誤

import React, { useState, useEffect } from 'react'

const Test = () => {
  const One = () => {
    return <h1 className="aaa">one</h1>
  }
  const Two = () => {
    return <h1 className="bbb">two</h1>
  }
  const Three = () => {
    return <h1 className="ccc">Three</h1>
  }

  const [data, setdata] = useState([One, Two, Three])

  return (
    <section>
      {data
        .filter((Component) => Component === Two)
        .map((Component) => {
          return (
            <div>
              <Component />
            </div>
          )
        })}
    </section>
  )
}

export default Test