如何在对象中放置 HTML 标签？答案

【问题标题】：How to place an HTML tag in an object?如何在对象中放置 HTML 标签？
【发布时间】：2021-04-22 02:11:53
【问题描述】：

我想从 React 中的对象数组中呈现一个列表。 'answer' 键包含以下文本...

Question: blah,
Answer: `List title
         The biggest benefits of Kin are:
         1.
         2.
         3.
         4.
`

我想在列表项之间添加间距。就像我在这里演示的那样......

Answer: `List title
         The biggest benefits of Kin are:
         <br/>
         1.
         <br/>
         2.
         <br/>
         3.
         <br/>
         4.

在列表项之间添加任何 html 标记都不起作用，因为标记会像这样呈现：

1.
2.
...

有什么想法吗？

【问题讨论】：

> 你可以在这里看到我想要实现的目标。其实我不能
道歉，已编辑。
看来你的问题和这个问题类似：Loop inside React JSX
@EvanMeredith-Davies 啊，现在，因为你努力编辑你的问题，所以投了赞成票:)
这能回答你的问题吗？ Loop inside React JSX

标签： html reactjs object pchart

【解决方案1】：

您可以使用 map 函数来遍历答案列表数组。
下面是它的外观：

import React from 'react'
export default class TestRoute extends React.Component {
    render() {
        const ANSWER_OBJECT =
        {
            title: "Answer Title 1",
            answers: [
                "The biggest benefit of ....",
                "1. ",
                "2. ",
                "3. "
            ]
        }

        return (
            <div>
                <h3>{ANSWER_OBJECT.title}</h3>
                {ANSWER_OBJECT.answers.map((item) => <div>{item}</div>)}
            </div>
        )
    }
}

结果：

回答标题 1
....的最大好处
1.
2.
3.

如果你有String而不是数组形式的答案，你可以使用split方法将它转换为数组。

render() {
        const answerString =
            `The biggest benefit of ....
            1. Point 1
            2. Point 2
            3. Point 3
            `

        return (
            <div>
                {answerString.split("\n").map((item) => <div>{item}</div>)}
            </div>
        )
    }

【讨论】：