ReactMarkDown 내에서 JSX 렌더링

ReactMarkDown 내에서 JSX 렌더링

ReactMarkDown 내에서 JSX를 렌더링하는 방법?내 JSX 요소를 안으로 감싸고 싶다.ReactMarkDown구성 요소를 갖추고 이와 같은 것을 성취할 수 있다.

  <ReactMarkdown>
    <Grid>
      {Some text}
    </Grid>
    <Grid>
      {Some text}
    </Grid>
 </ReactMarkdown>

이것을 사용하기보다 가능한 최선의 접근방법은 무엇인가?<ReactMarkdown>각 JSX 요소 내에서 여러 번이요?

사용자 지정 구성 요소를 생성하십시오.

이 구성 요소 예제에서는 자식 노드를 매핑하고 각 아이를ReactMarkDown.

https://reactjs.org/docs/react-api.html#reactchildrenmap

const MarkdownPlus = ({ children }) => (        
    React.Children.map(children, child => (
       <ReactMarkdown>
              {React.cloneElement(child, {})}
       </ReactMarkdown>
    )))
);

그리고 이렇게 쓰세요.

 <MarkdownPlus>
    <Grid>
      {Some text}
    </Grid>
    <Grid>
      {Some text}
    </Grid>
 </MarkdownPlus>

반응하라.어린이.맵 대 어린이.맵, 무엇이 다른가?

고지 사항:ResactMarkdown이 수락하는지 확실하지 않음<Grid>유년기에일반 텍스트(마크다운 코드)만 허용하면 위의 코드가 작동하지 않는다.당신은 지원해야 할 것이다.<ReactMarkDown>각자에게<Grid>.

MDX를 보면 JSX와 마크다운을 함께 사용할 수 있다.

예를 들면 다음과 같다.

<Grid>
  # heading
</Grid>
<Grid>
  *italic*
</Grid>

참조URL: https://stackoverflow.com/questions/67467031/render-jsx-inside-reactmarkdown