为什么我的 React 组件将我的 JSX 呈现为文本而不是 HTML？

Question

请原谅我，因为我是 JavaScript 和 React 的完全菜鸟。我正在尝试输出朋友列表。 props.friends 是一个由朋友名字组成的数组。但是，我的代码只是将 <li> 标签输出为页面上的文本

我的代码：

const Friends = (props) => {
    return(
        <div>
            <p>Hello, {props.name}.</p>
            <p>Below is a list of your friends: </p>
            <ul>
                {props.friends.map(x => '<li>' + x + '</li>')}
            </ul>

        </div>
    )
}

如果有人能帮我弄清楚为什么这不是呈现实际列表，而只是将 <li>friend1</li><li>friend2</li><li>friend3</li> 显示为文本，我们将不胜感激。谢谢！

Answer 1

你的

.map(x => '<li>' + x + '</li>')

创建一个 字符串数组 ，而不是 React 元素。如果要渲染元素，需要使用JSX语法。

.map(x => <li>{x}</li>)

为什么我的 React 组件将我的 JSX 呈现为文本而不是 HTML？

Why is my React component rendering my JSX as text rather than HTML?

html

javascript

jsx

reactjs

react-component