ReactでJSXフラグメントを連結する

Question

私は、Reactの中の任意の量のリンクを持つことができるメッセージをレンダリングするはずのコンポーネントに取り組んでいます。この構成要素のpropsは、であり、tagsであり、タイプTagのオブジェクト配列であるmessageを取ります。 tagタイプのサンプルを以下に見ることができる。

{ 
    index: 6, 
    tagged_object_id: 4, 
    tag_type: "object", 
    tag_text: "world!" 
} 

成分は、上記タグ、及びHelloのメッセージを含むpropsで作成されるならば、私は次の出力を有するようにレンダリングする機能を希望します。

<p> Hello <Link to="/object/4">world!</Link></p> 

この出力はもちろん、任意の量のタグに対して有効です。

実際にこの出力をJSXで生成することに固執しています。

私はこれを以下のように試みましたが、明らかにコードは機能しません。 render()機能でこの出力を作成するにはどうすればよいですか？

import React from 'react'; 
import Link from 'react-router-dom'; 
import styles from './Message.css'; 

class Message extends React.Component { 

    constructor(props) { 
     super(props); 
     this.formattedMessage = this.formatMessage(this.props.message, this.props.tags); 
    } 

    formatMessage(message, tags) { 
     var returnVal = [] 
     var sortedTags = tags.sort(this.compareTags) 
     var lastIndex = 0 
     for (var i = 0; i < sortedTags.length; i++) { 
      returnVal.push(message.substring(lastIndex, sortedTags[i].index)) 
      returnVal.push(<Link to={"/"+sortedTags[i].tag_type+"s/"+sortedTags[i].tagged_object_id}/>) 
      lastIndex = sortedTags[i].index 
     } 
     returnVal.push(message.substring(lastIndex, message.length)) 
     return returnVal 
    } 

    compareTags(a, b) { 
     if (a.index < b.index) { 
      return -1; 
     } else if (a.index > b.index) { 
      return 1; 
     } else { 
      return 0; 
     } 
    } 

    render() { 
     console.log(this.formattedMessage) 
     return (
      <div className="col-md-12"> 
       <pre className={styles.message}> 
        <p>{this.formattedMessage}</p> 
       </pre> 
      </div> 
     ) 
    } 

} 

export default Message; 

Answer 1

私が要件を正しく理解していれば、次のコードは期待どおりに機能するはずです。

もちろん、レンダリング機能を返す前にタグ配列を並べ替えることもできます。

import React, { Component } from 'react'; 
import { Link } from 'react-router-dom'; 

class Message extends Component { 
    render() { 
    const { message = '', tags = [] } = this.props; 
    return (
     <div> 
     { 
      tags.map((tag, index) => (
      <p>{message} <Link to={`/${tag.tag_type}/${tag.tagged_object_id}`}>{tag.tag_text}</Link></p> 
     )) 
     } 
     </div> 
    ); 
    } 
} 

export default Message;