如何在React中为<mark>HTML元素正确添加第二个子元素？

你的问题出在props.colors?.map的回调函数里：

1. 没有显式返回要渲染的<span>元素，React无法识别要渲染的内容；
2. 列表元素缺少必需的key属性，这会触发React的警告。

正确的实现方式 #

修改map部分的代码，确保返回JSX元素并添加唯一key：

{
  props.colors?.map((col: string, index: number) => {
    console.log(col);
    // 显式返回span元素，并添加key
    return <span key={index} className='dot' style={{ backgroundColor: col }}></span>
  })
}

如果想用箭头函数的隐式返回（省略return），可以把代码块换成小括号：

{
  props.colors?.map((col: string, index: number) => (
    <>
      {console.log(col)} {/* 把console.log放在JSX表达式里 */}
      <span key={index} className='dot' style={{ backgroundColor: col }}></span>
    </>
  ))
}

为什么之前的写法无效？ #

• 你最初的map回调用大括号包裹，但没有写return，默认返回undefined，所以map生成的数组全是undefined，React不会渲染任何内容；
• 后来加&& <></>的写法，虽然消除了报错，但本质上map返回的还是空内容数组，空片段也不会渲染任何东西，所以依然看不到圆点。

补充说明 #

• key属性建议用唯一标识值，如果你的colors数组里的颜色值都是唯一的，也可以直接用col作为key：key={col}；
• 确保.dot类在Mark.css里设置了合适的宽高样式，比如：

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
}

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