reactjs - 如何应用 MathJax/KaTex 渲染 React 组件

Question

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

所以我制作了一个打开 modal 的按钮它在较小的窗口中呈现不可编辑的 edior 内容，我希望在模式中呈现 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 元素，而不是一次全部应用。当需要时。从 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);
    }
}

我更喜欢基于钩子(Hook)的组件而不是类，它看起来像这样:

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 应用于包含更新数学的最小容器。