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

Question

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

因此，我制作了一个按钮，打开一个模态，在一个较小的窗口中渲染不可编辑的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

KaTeX可以根据需要应用于单个DOM元素，而不是一次全部应用，方法是在需要时调用renderMathInElement。从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应用于包含更新数学的最小容器。