ReactJS: создать DOM на лету

Question

Как превратить это:

{dataFormat: 'hello my [friend=https://en.wikipedia.org/wiki/Friendship]'} 

к этому:

<div> 
    hello my <a onClick={...} href="https://en.wikipedia.org/wiki/Friendship">friend</a>   
</div> 

мне нужно каким-то образом быть в состоянии сканировать строку и создавать ссылки на лету. Есть идеи?

DataFormat может содержать более одной ссылки с неизвестным порядком между «регулярным» текстом и ссылками.

Answer 1

Закончено с использованием регулярного выражения, которое выполнило эту работу.

JSBin: https://jsbin.com/yogepa/edit?js,output

Код:

renderSpan(content) { 
    return <span> 
     {content} 
    </span> 
} 

renderLink(content) { 
    const parts = content 
      .replace(/\[|\]/g, '') 
      .split('='); 

    return <a style={ styles.link } onClick={ alert }> 
     {parts[0]} 
     </a> 
} 

renderFormat() { 
    let { dataFormat } = this.state; 

    const regex = /(\[[^\]]+])*([^\[]+)(\[[^\]]+])*(\[[^\]]+])*([^\[]+)(\[[^\]]+])*(\[[^\]]+])*([^\[]+)(\[[^\]]+])*/; 

    const matches = regex.exec(dataFormat); 

    return matches.reduce((output, match, index) => { 

     if (match && index >= 2) { 
      output.push(match.indexOf('[') >= 0 ? 
       this.renderLink(match) : 
       this.renderSpan(match) 
      ); 
     } 

     return output; 
    }, []); 
} 

я, вероятно, может улучшить Regex выражение, хотя.