试图通过 document.getgetElementsByTagName 在 reactjs 中映射

Question

当我运行 document.getElementsByTagName 时，我试图映射生成的对象。我意识到我无法映射对象，只能映射数组，但我不知道如何将其转换为对象以使其可迭代。

我的代码如下所示：

const [h2, setH2] = useState([]);

const getH2 = () => {
setH2(document.getElementsByTagName("h2"));
console.log(h2)
  }

这给了我以下结果：

试图通过 h2 映射 returns 错误：

TypeError: h2.map is not a function

我也试过 h2.HTMLCollection.map() 但它抛出同样的错误。

如何映射 docuemnt.getElementsByTagName 的结果？我尝试将对象转换为数组，但到目前为止没有成功。

Answer 1

您可以使用 Array.from.

例如返回每个元素的类：

Array.from(document.getElementsByTagName('h2')).map(elem => elem.className)

Answer 2

您可以尝试这样的操作：

function App() {
    const [h2, setH2] = useState([]);

    const getH2 = () => {
        const elements = [];
        const el = document.getElementsByTagName('h2');
        for (const item of el) {
            elements.push(item.innerText);
        }
        setH2(elements);
    };
    return (
        <div>
            <h2>One</h2>
            <h2>Two</h2>
            <h2>Three</h2>
            <h2>Four</h2>

            <hr />
            <button onClick={getH2}>Get Innner Text</button>
            <hr />
            <ul>
                {h2.map((item, i) => (
                    <li key={i}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

现场演示：https://stackblitz.com/edit/react-vtb3fv

试图通过 document.getgetElementsByTagName 在 reactjs 中映射

Trying to map through document.getgetElementsByTagName in reactjs

javascript

arrays

object

getelementbyid

reactjs