为什么我的 React 组件将我的 JSX 渲染为文本而不是 HTML？答案

【问题标题】：Why is my React component rendering my JSX as text rather than HTML?为什么我的 React 组件将我的 JSX 渲染为文本而不是 HTML？
【发布时间】：2021-12-14 03:48:03
【问题描述】：

请原谅我，因为我对 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> 显示为文本，将不胜感激。谢谢！

【问题讨论】：

标签： javascript html reactjs jsx react-component

【解决方案1】：

你的

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

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

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

【讨论】：