반응 자동 렌더링 수학 라텍스

Question

최근 웹 응용 프로그램 용 ReactJS로 업그레이드되었습니다. 저는 MathJax와 함께 Angular를 사용하여 페이지에서 수학 TeX을 자동 렌더링했습니다 (페이지에서 수학이 변경 될 때마다 MathJax는 페이지를 통과하여 구분 기호를 찾아 수학을 렌더링합니다). React 구성 요소 라이프 사이클에서 MathJax를 사용할 수 없었으므로 온라인에 많은 정보가없는 것 같습니다. 이전의 구현은 페이지의 변경 사항을 청취하여 다음을 호출하는 것입니다.

MathJax.Hub.Queue ([ "Typeset", MathJax.Hub]);

수학 TeX을 React (어떻게 ReactJS를 사용해야합니까?)로 자동 렌더링하는 방법은 무엇입니까? 참고로, 내 수학은 텍스트 본문과 인라인되어 있으므로 전체 텍스트를 렌더링하지 않고 수학을 렌더링하고 싶습니다.

미리 감사드립니다.

케빈

Answer 1

해결책을 찾을 수있었습니다. 또한 MathJax 스크립트 링크가 MathJax took down their CDN부터 올바른지 확인하십시오.

class Preview extends React.Component { 

    componentDidMount() { 
    MathJax.Hub.Queue(["Typeset",MathJax.Hub, ReactDOM.findDOMNode(this)]); 
    } 

    componentDidUpdate() { 
    MathJax.Hub.Queue(["Typeset",MathJax.Hub, ReactDOM.findDOMNode(this)]); 
    } 

    render() { 
    var tex= this.props.name, 

    if(!!tex) { 
     texDisplay = "$$" + tex + "$$" 
    } 
    return (
     <div>The Tex!</div> 
     <div>{texDisplay}</div> 
    ) 
    } 
}