HTML/CSS实现的Instagram首页迁移至React后布局异常、样式报错如何解决

布局异常问题解决方案 #

• 全局替换所有DOM元素的class属性为className：React JSX不识别原生HTML的class属性，会导致你的CSS类选择器无法匹配对应元素，是布局混乱的最常见原因。
• 重构原有main.js的原生DOM操作逻辑：原生的querySelector、appendChild、修改innerHTML等直接操作真实DOM的逻辑会和React的虚拟DOM渲染逻辑冲突，导致页面DOM结构不符合预期，需要改成基于React state驱动视图渲染的写法。
• 检查样式引入方式：如果你的项目开启了CSS Modules、CSS in JS等样式隔离能力，原有全局CSS的类名会被编译成哈希值，和你写的CSS选择器无法匹配，可以暂时先将CSS文件以全局方式引入排查问题。

input标签style属性报错解决方案 #

• JSX的style属性不支持原生HTML的字符串写法，必须传入小驼峰命名的样式对象，你提供的input标签正确写法如下：

<input 
  className="search-box" 
  type="text" 
  placeholder=" Search" 
  style={{ fontFamily: "Arial, FontAwesome" }}
/>

• 外层{}是JSX插值语法标记，内层{}是样式对象本身，font-family需要改为小驼峰写法fontFamily，属性值用字符串包裹即可。
• 如果删除style属性后仍有报错，检查是否还有其他未修正的语法问题：比如标签未正确闭合、其他DOM元素的class未替换为className、特殊字符未正确转义。

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