JSX 구성 요소 + dangerouslySetInnerHTML? 이 시나리오를 구현

Question

그래서 난 데 문제 : 백엔드 서버에서

, 나는 이런 식으로 함께 뭔가를 HTML 문자열 왔는지 오전 : 단지 dangerouslySetInnerHTML를 사용하는 경우

<ul><li><strong>Title1</strong> <br/> <a class=\"title1" href="title1-link">Title 1</a></li><li><strong>Title2</strong> <a class="title2" href="/title2-link">Title 2</a> 

일반적으로, 그 잘 될 것입니다.

그러나, HTML에서 a href 태그 주위에, 정말 같은 구성 요소들을 포장해야합니다

a 태그를 포장 할 때 때문입니다

<ModalLink href={'title'}> 
    {Title} 
</ModalLink> 

, 구성 요소는 기본적으로 새 자식을 만드는 기능을 추가 창문.

나는 이것이 Regex에서 구현해야 할 필요가 있다고 생각했지만, 어디서부터 시작해야하는지는 조금도 모른다.

Answer 1

html 문자열에서 필요한 값을 해독하고 정규식으로 추출한 다음 dangerouslySetInnerHtml 대신 JSX를 사용할 수 있습니다. 이 구성 요소는 샘플 HTML 문자열을 렌더링하는 방법을 보여줍니다.

import React, { Component } from 'react' 

export default class App extends Component { 
    render() { 
     const html = `<ul><li><strong>Title1</strong><br/><a class="title1" href="/title1-link">Title 1</a></li><li><strong>Title2</strong><br/><a class="title2" href="/title2-link">Title 2</a></li></ul>` 

     return (
      <div> 
       <ul> 
       {html.match(/(<li>.*?<\/li>)/g).map(li => { 
        const title = li.match(/<strong>(.*?)<\/strong>/)[1] 
        const aTag = li.match(/<a.*?\/a>/)[0] 
        const aClass = aTag.match(/class="(.*?)"/)[1] 
        const href = aTag.match(/href="(.*?)"/)[1] 
        const aText = aTag.match(/>(.*?)</)[1] 
        return (
         <li> 
          <strong>{title}</strong> 
          <br/> 
          <a className={aClass} href={href}>{aText}</a> 
         </li> 
        ) 
       })} 
       </ul> 
      </div> 
     ) 
    } 
} 

거기에서 당신은 귀하의 ModalLink 구성 요소에있는 태그를 간단히 감쌀 수 있습니다. 이것이 정확히 어떻게하고 싶은지 확실하지 않지만 여기에 예제가 있습니다.

return ( 
    <li> 
     <strong>{title}</strong> 
     <br/> 
     <ModalLink href={href}> 
      <a className={aClass} href={href}>{aText}</a> 
     </ModalLink> 
    </li> 
) 

html.match(/(<li>.*?<\/li>)/g) 일치 다음으로 매핑 될 수있는 배열에서 HTML 문자열 내의 각각 <li>...</li>에게. 그런 다음 캡쳐 (괄호 안의 부분)를 사용하여 각 <li>...</li>에서 제목, href 등을 추출한 다음 JSX에서 사용할 수 있습니다. This answer은 사용 된 정규식에 대한 자세한 정보를 제공합니다.

Answer 2

불행히도 저는 실제로 JavaScript를 사용한 적이 없기 때문에 내 대답은이 질문의 정규식 부분에만 초점을 맞출 것입니다. (그래도, 바닥 시도를 추가했습니다!)

내가 제대로 이해하면 someLink 및 someTitle (가) 역시 ModalLink 태그에있을 것입니다하는 방법으로 <ModalLink href={'someLink'}>someTitle</ModalLink>와 <a href="someLink">someTitle</a> 태그를 바꾸려면 - 그것이 href을 찾을 때까지 내가 모든 문자를

지금 여기이 정규식 패턴

<a [^<]+?href\s*=\s*("|')(.*?)\1>(.*?)<\/a> 

이 <a로 시작하는 태그로 일치를 보면 잘못된 방법으로이 문제를 이해하고 일치하고있어 경우에 저를 정정 바랍니다 (모든 숫자와 함께 href와 수식 기호 사이의 공백 문자). 그런 다음 나중에 '' 또는 "" 따옴표 사이의 문자열을 검색하여 캡처하여 나중에 사용합니다. 태그 >의 끝을 찾고 그 끝과 닫는 태그 <\a> 사이에있는 내용을 캡처 할 때까지 다시 일치합니다.

이제 주어진 문자열에 일치하는 정규식 교체를 위해 몇 가지 방법 (내가이 자바 스크립트에서 어떻게 작동하는지에 익숙 해요 미안 해요)를 사용하여이 패턴

<ModalLink href={'$2'}> {$3} </ModalLink> 

로 교체하는 경우

당신은 당신이 받고있는 예를 들어, HTML 문자열이 같은 결과를 얻을 것이다 :

<ul><li><strong>Title1</strong> <br/> <ModalLink href={'title1-link'}> {Title 1} </ModalLink></li><li><strong>Title2</strong> <ModalLink href={'/title2-link'}> {Title 2} </ModalLink> 

교체하는 패턴의 $ 2 $ 3 부를 단지가 될 전에 언급 캡처 된 부분 REPL에 대한 자리 표시 자입니다 그들이 볼 수 있듯이 그들과 함께 지냈다. 당신은 내가 here을 제공 한 패턴을 시도 할 수 있습니다

(나는 이미 1 군을 캡처로 인용 부호를 캡처 한 단순히 때문에 그들은 그룹 2와 3을 캡처 대신 1로 시작된다).

창의 상단에있는 정규 표현식과 문자열 입력을보고 편집 할 수 있지만 대체 패턴과 그 결과는 하단에 있습니다.

---

편집 : 지금은 태그와 태그를 교체하기위한 자바 스크립트 방법을 사용하여 온라인 컴파일러 최선을 시도하고 위에서 언급 한 정규식이 방법을 사용하는 경우 잘 작동하는 것 같다 :

이 케이스 html에서

var regexMatch = html.replace(/<a [^<>]+?href\s*=\s*("|')(.*?)\1[^<>]*?>(.*?)<\/a>/g, "<ModalLink href={'$2'}> {$3} </ModalLink>"); 

물론 당신이 <a> 태그를 대체하고자하는 HTML 문자열이어야합니다.

this online here도 시도 할 수 있습니다.