React条件渲染出现紫线，已使用React.Fragments仍无法消除该如何解决？

开发者阿泽

2026-10-3

问题成因&修复方案

你遇到的紫线和React.Fragment没有关系，是代码里的JSX语法错误导致浏览器解析DOM结构异常，触发了浏览器的错误节点提示样式，具体问题点如下：

第一个语法错误在Render 2组件中：删除账号按钮的闭合标签写法错误，你写的是</</button>>，多了多余的</和右尖括号，会导致DOM解析生成异常的冗余节点
第二个语法错误在Render 3组件中：select标签没有正确闭合，你写的<select onChange={options}后面缺少右尖括号，同时内部的options标签也没有正确嵌套闭合，整个下拉框结构错误
额外优化点：你条件渲染的兜底分支返回的是空字符串""，会作为文本节点插入到DOM中，建议改成返回null避免生成多余的空白节点

修复后的代码示例

Render 2 修正后

return (
    <React.Fragment>
        <p> Username : John </p>
        <p> Timezone : London </p>
        <span>
        <button> Edit Profile </button>
        <button> Delete account </button>
        </span>
    </React.Fragment>   
)

Render 3 修正后

return (
    <React.Fragment>
        <label htmlFor="email"> Username : 
          <input type="text"/>
        </label>
        <label htmlFor="timezone"> Timezone :
          <span>
          <select onChange={options}>
            {/* 在这里补充正确的option选项 */}
            <option value="london">London</option>
          </select>
          </span>
        </label>
        <button type="submit"> Save Profile </button>
        <button> Cancel </button>
    </React.Fragment>
);