如何应用MathJax/KaTex来呈现React组件

Question

我正在使用React & SlateJS制作一个网页编辑器。编辑器内容中有LaTex代码，我希望用户看到呈现的LaTex方程。MathJax和KaTex通过将它们加载为CDN，具有自动渲染功能。一旦加载了它们，就会呈现html body上的内容。但当我修改内容时，它们不是实时渲染的。

所以我做了一个按钮来打开一个modal，在一个较小的窗口中呈现不可编辑的编辑内容，并且我希望在模式中呈现LaTex代码。

APP组件：

import {Editor} from 'slate-react';
import ReactModel from 'react-modal';
import RenderedEditorDialog from "./RenderedEditorDialog";

class APP extends React.component {

    ...

    render() {
        return (
            <div className={"editorContainer"}>
                <div className={"editor"}>
                    <Editor
                        autoFocus
                        ref={this.ref}
                        value={this.state.value}
                        onChange={this.onChange}
                        onKeyDown={this.onKeyDown}
                        renderMark={this.renderMarks}
                        renderBlock={this.renderBlock}
                    />
                </div>
                <ReactModal
                    isOpen={this.state.showMathDialog}
                    contentLabel="Rendered content"
                    onRequestClose={this.handleCloseMathDialog}
                >
                    <button onClick={this.handleCloseMathDialog}>Close Dialog</button>
                    <RenderedEditorDialog value={this.state.value}/>
                </ReactModal>
            </div>
        )
    }
}

RenderedEditorDialog (模态)组件：

import {Editor} from 'slate-react';

class RenderedEditorDialog extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Editor
                    value={this.props.value}
                    renderMark={this.renderMarks}
                    renderBlock={this.renderBlock}/>
            </div>
        )
    }
}

我的问题是如何应用MathJax/KaTex来呈现RenderedEditorDialog组件中的内容？

提前感谢！

Answer 1

通过在需要时调用renderMathInElement，KaTeX可以按需应用于单个DOM元素，而不是一次性应用到所有DOM元素。从componentDidUpdate调用它应该可以做到这一点：

import {Editor} from 'slate-react';

class RenderedEditorDialog extends React.Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef();
    }

    render() {
        return (
            <div ref={this.ref}>
                <Editor
                    value={this.props.value}
                    renderMark={this.renderMarks}
                    renderBlock={this.renderBlock}/>
            </div>
        )
    }

    componentDidUpdate() {
        renderMathInElement(this.ref.current, katexOptions);
    }
}

我更喜欢使用基于钩子的组件，而不是类，它看起来像这样：

function RenderedEditorDialog(props) {
    const ref = useRef();
    useEffect(() => {
        renderMathInElement(ref.current, katexOptions);
    });
    return (
        <div ref={ref}>
            <Editor
                value={props.value}
                renderMark={props.renderMarks}
                renderBlock={props.renderBlock}/>
        </div>
    )
};

我不确定您是想在RenderedEditorDialog上这样做，还是想在其他更具体的组件上这样做，但这应该会给您一些启发。为了提高速度，您希望将renderMathInElement应用于包含更新后的数学的最小容器。