在React中連接JSX片段

我正在研究React中的一個組件，它應該呈現出一個可以有任意數量鏈接的消息。該組件的props需要message這是一個string和tags，它是Tag類型的對象數組。所述tag類型的樣品可以看到下面：在React中連接JSX片段

{ 
    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;

來源

2017-04-09 kamil1

您應該在返回DOM之前在render函數中調用this.formattedMessage = this.formatMessage（this.props.message，this.props.tags）;''。我也會將一些'formatMessage'代碼放到渲染中，這是您實際創建HTML的部分。 –

如果我正確理解了您的要求，下面的代碼應該按照您期望的方式運行。

當然，如果您願意，也可以在渲染函數返回之前對標籤數組進行排序。

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;

來源

2017-04-10 02:33:16

在React中連接JSX片段

回答

相關問題