ReactJS：在飛行

Question

創建DOM如何改造這個：

{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; 
    }, []); 
} 

我可能雖然提高了正則表達式表達。