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

Question

我想在 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.
...

有什么想法吗？

Answer 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.

如果您的答案不是数组而是字符串形式，您可以使用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>
        )
    }

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

How to place an HTML tag in an object?

html

object

pchart

reactjs