JavaScript for循环内拼接HTML到ul列表仅显示最后一项如何解决

核心问题 #

• 你当前的写法是把JSX节点当作普通字符串用+=拼接，这不符合React语法规范：JSX本质是React.createElement的语法糖，不是普通字符串，不能直接拼接
• 你声明的list变量没有赋初始值，默认值为undefined，执行+=操作时会先将undefined转为字符串拼接，导致内容异常

正确实现方案 #

用数组存储循环生成的JSX节点，React原生支持直接渲染包含JSX元素的数组，修改后的代码如下：

const text = "the Text"
// 初始化list为空数组
const list = []
for (let i = 1; i < split_respone.length; i+=2) {
  // 边界判断，避免i+1超出数组长度报错
  if (!split_respone[i+1]) break
  // 循环时将生成的li节点推入数组，必须添加唯一key属性
  list.push(
    <li key={i} className="link-list-item">
      <a
        href={split_respone[i]}
        target="_blank"
        rel="noopener noreferrer"
        className="link-list-item-url">
        {split_respone[i+1]}
      </a>
    </li>
  )
}
// 直接将数组放入ul中即可正常渲染
const string = <ul className="link-list">{text}{list}</ul>;
const message = self.createChatBotMessage(string);

注意事项 #

• 循环渲染的JSX节点必须添加唯一的key属性，否则React会抛出警告，示例中用了循环下标i作为key，若你split_respone里的链接是唯一的，也可以用链接作为key值
• 尽量替换掉var声明，改用const/let避免变量提升带来的额外问题

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