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;

然而，react打印出以下错误：此方法在jquery或vuejs中运行良好，但为什么呢？

TypeError：＃不是函数       MarkdownContent.componentDidMount       C：/mygit/blog/frontend/src/Common/Markdown/MarkdownContent.js：10          7 | componentDidMount（）{          8 | const {_md} = this;          9 | let blocks = _md.querySelectorAll（＆＃39; pre code＆＃39;）;


10 | Array.prototype.forEach（blocks，block =＆gt; highlightBlock（block））;           11 | }           12 |           13 | render（）{

Answer 1

querySelectorAll未返回Array，它会返回NodeList。如果您从Array创建NodeList，您的代码将正常运行。

将第10行替换为：

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

React Hightlight.js＆＃34; TypeError：＃<nodelist>不是函数＆＃34;

1 个答案: