查找包含某个类名react js的组件

Question

从包含特定类名的组件列表中查找组件。 就我而言，我想显示具有类名“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

您可以通过这种方式来完成此操作，而不是为该过滤器查找类名。

我的更改中有 2 个关键内容：

const [data, setdata] = useState([One, Two, Three]) 您不应该调用 （在钩子，它正在调用 React.createElement(One) 来渲染该组件)

data.filter((Component) => Component === Two) 检查组件引用而不是类名，因为类名可能是改变了，它会导致你的逻辑出现错误

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