React渲染推入数组的未闭合HTML元素：报错与文本显示异常求助

嘿，我完全懂你现在卡在哪了——React的JSX和传统的HTML字符串拼接逻辑不一样，你不能把一个未闭合的标签拆成两半塞进数组里，这根本不符合JSX的运行机制。

为什么你的代码会出问题？ #

1. JSX不是字符串：你尝试push的<div className="select"><select id="department">不是普通字符串，而是JSX语法，它会被编译成React.createElement调用。拆分标签的写法本身就违反了JSX的语法规则，自然会触发错误。
2. 字符串形式的标签会被当成文本渲染：当你用单引号把标签包起来（比如'<div>LOADING</div>'），React会把它当作纯文本处理，所以会显示转义后的<和>，而不是渲染成真正的HTML元素。

正确的写法应该是这样的 #

你不需要拆分标签，直接在完整的JSX元素内部动态生成<option>就可以了，这是React推荐的做法：

render() {
  const { bookingStatus } = this.state;

  // 直接根据状态返回对应的JSX
  if (bookingStatus.length) {
    return (
      <div>
        <div className="select">
          <select id="department">
            {/* 直接在select内部用map生成option */}
            {bookingStatus.map(el => (
              <option value={el.id} key={el.id}> {el.name} </option>
            ))}
          </select>
        </div>
      </div>
    );
  } else {
    return <div>LOADING</div>;
  }
}

如果坚持要用数组的方式（虽然没必要） #

如果你一定要通过数组来构建内容，那也得把完整的元素塞进数组，而不是拆分标签：

render() {
  const { bookingStatus } = this.state;
  const bookingStatusList = [];

  if (bookingStatus.length) {
    // 创建完整的select容器元素，内部包含所有option
    const selectComponent = (
      <div className="select">
        <select id="department">
          {bookingStatus.map(el => (
            <option value={el.id} key={el.id}> {el.name} </option>
          ))}
        </select>
      </div>
    );
    bookingStatusList.push(selectComponent);
  } else {
    // 这里也要用JSX，不要用字符串
    bookingStatusList.push(<div>LOADING</div>);
  }

  return <div>{bookingStatusList}</div>;
}

小提醒 #

React的核心思路是基于状态渲染完整的组件树，不要用传统前端拼接HTML字符串的思维来写JSX。动态内容直接嵌套在对应的父元素内部就好，既简洁又符合React的设计理念。

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