Реагируйте Hightlight.js "Ошибка типа: # <NodeList>не является функцией"

Question

Чтобы выделить код в компоненте, который загружается асинхронно, используйте файл hightlight.js, как показано в следующем коде:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import marked from 'marked';
import { highlightBlock } from 'highlight.js';

class MarkdownContent extends Component {
    componentDidMount() {
        const { _md } = this;
        let blocks = _md.querySelectorAll('pre code');
        Array.prototype.forEach(blocks, block => highlightBlock(block));
    }

    render() {
        const { content } = this.props;
        let html = marked(content).replace(
            /<a(.*?)href="http/g,
            '<a$1target="_blank" href="http'
        );
        return (
            <div
                ref={el => (this._md = el)}
                className="md-content"
                dangerouslySetInnerHTML={{ __html: html }}
            />
        );
    }
}

MarkdownContent.propTypes = { content: PropTypes.string };
MarkdownContent.defaultProps = { content: '' };
export default MarkdownContent;

Однако, реакцият выдает следующую ошибку: Этот метод хорошо работает в jquery или vuejs., но почему?

Ошибка типа: # не является функцией MarkdownContent.componentDidMount C: /mygit/blog/frontend/src/Common/Markdown/MarkdownContent.js: 10 7 |componentDidMount () {8 |const {_md} = это;9 |let blocks = _md.querySelectorAll ('pre code');

10 |Array.prototype.forEach (blocks, block => highlightBlock (block));11 |} 12 |13 |render () {

Answer 1

querySelectorAll не возвращает Array, возвращается NodeList.Если вы создадите Array из этого NodeList, ваш код будет работать нормально.

Замените строку 10 следующим:

Array.from(blocks).forEach(block => highlightBlock(block));