为什么我的React组件将JSX渲染为文本而非实际HTML元素？

你在map遍历的回调函数中返回的是拼接了<li>标签的普通字符串，React为了防范XSS注入风险，默认不会将插入的字符串解析为HTML标签，只会原样作为文本渲染，因此你会看到标签源码直接显示在页面上。

直接返回JSX元素即可，不需要用引号包裹标签，同时要为遍历生成的列表元素添加唯一key属性，避免React抛出渲染警告：

const Friends = (props) => {    
  return(
    <div>
      <p>Hello, {props.name}.</p>
      <p>Below is a list of your friends: </p>
      <ul>
        {/* 直接写JSX，不要用引号包裹标签 */}
        {props.friends.map((x, index) => <li key={index}>{x}</li>)}
      </ul>
    </div>
  )
}

如果你的friends数组中每一项都有唯一的业务ID（比如好友用户ID），优先使用业务ID作为key值代替数组索引，渲染性能和稳定性更佳。

内容的提问来源于stack exchange，提问作者Avery