Reactx文字列をhtmlにする

Question

私は現在、プロジェクトに取り組んでおり、リンクのためのメッセージの解析に少し問題があります。私はhtmlの文字列をhtmlに変換してからdangerouslySetInnerHTMLを使って変換するより良い方法があるのだろうかと思っていました。この方法では危険である可能性があるので、私はむしろよりきれいな方法で処理する方法を模索しています。

//Function for regex 
var www_reg = /(?:^|[^"'])(^|[^\/])(www\.[\S]+(\b|$))/gim; 
message = message.replace(www_reg, '$1<a href="http://$2" class= "link" target="_blank">$2</a>'); 
return {__html: message}; 

//Render 
<div className='message-class' onClick={this.clickedLink} dangerouslySetInnerHTML={this.replaceURLWithHTMLLinks(display_message.last_message)}> 

Answer 1

単純なことは、文字列をregexで分割し、URLをJSX要素に変換することです。エレガントなソリューションは、dangerouslySetInnerHTMLを必要としません。

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     string: 'Hello www.example.com World www.stackoverflow.com', 
 
     message: [], 
 
    }; 
 
    } 
 
    componentDidMount() { 
 
    let www_reg = /(www\.[\S]+(\b|$))/gim; 
 
    let blocks = this.state.string.split(www_reg); 
 
    let message = blocks.map(block => { 
 
     if (block.match(www_reg)) { 
 
     return <a href={'//' + block}>{block}</a>; 
 
     } else { 
 
     return block; 
 
     } 
 
    }); 
 
    this.setState({ message }); 
 
    } 
 
    render() { 
 
    return(
 
     <div>{this.state.message}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id='View'></div>

PS：私は（それが一部の文字をカットオフ）あなたのregexを使用して、いくつかのトラブルがあったので、私はそれを少し変更しました。しかし、ここではネイティブJS関数しか使用していないので、とにかく動作するはずです。

Answer 2

あなたが（順序を維持）テキストとURLの配列にメッセージ文字列を解析し、実際にURLを旋回するリンク・エレメントを反応させることを上にマッピングできました。その後、まっすぐにあなたのdiv <div>{arrayOfParts}</div>

そこにあなたのためにそれを行うだろうNPMモジュールreact-linkifyである、またはあなた自身を再実装したい場合は、ソースコードhereを見ることができるように見えますの中にその配列をウンチができます。