Question

我正在研究React中的一个组件，它应该呈现一条消息，其中可以包含任意数量的链接。此组件的props包含message string和tags，它是Tag类型的对象数组。 tag类型的示例如下所示：

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

如果使用包含上述标记的props和Hello的消息创建组件，我希望渲染函数具有以下输出：

<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

If I understood your requirements correctly, the following code should function the way you expect.

Of course, you can also sort the tags array prior to the return of the render function, if you so choose to do so.

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;

在React中连接JSX片段

1 个答案: