React类组件无法渲染SCSS样式求助：函数组件转类组件后样式丢失

你在函数组件转类组件的过程中踩了几个类组件的基础写法坑，这些错误不仅会让组件功能失效，还会间接导致SCSS样式“消失”——本质是组件没有渲染出预期的DOM结构，样式自然无从生效。咱们一步步来修正：

核心错误点 #

• 构造函数参数错误：类组件的constructor只能接收props作为唯一参数，你直接把handleChange、label作为参数传入是完全错误的，这会导致父组件传递的属性无法被正确初始化。
• Props访问方式错误：类组件中，父组件传递的所有属性都要通过this.props访问，比如this.props.label、this.props.handleChange，而非直接this.label。
• Input属性传递错误：otherProps这种写法无法把剩余属性传递给input，必须用扩展运算符{...this.props}来展开所有未手动处理的props。

修正后的完整代码 #

import React, { Component } from 'react';
import './styles.scss';

class FormInput extends Component {
  // 类组件构造函数仅需接收props参数
  constructor(props) {
    super(props); // 必须调用super并传入props，确保this.props能正常访问
  }

  render() {
    // 从this.props中解构属性，代码更简洁
    const { handleChange, label, ...otherProps } = this.props;
    
    return (
      <div className="formRow">
        {/* 判断props中的label是否存在 */}
        {label && (
          <label>
            {label}
          </label>
        )}
        {/* 用扩展运算符传递剩余属性，同时绑定onChange事件 */}
        <input className="formInput" onChange={handleChange} {...otherProps} />
      </div>
    );
  }
};

export default FormInput;

为什么样式会“消失”？ #

你的原代码存在语法错误，组件无法正常渲染出带有formRow、formInput类名的DOM元素（甚至可能直接报错导致组件不挂载），浏览器中根本没有这些带目标类名的节点，SCSS自然无法生效。修正错误后，组件会渲染出预期的DOM结构，样式也就会正常显示了。

额外提一句：如果不需要在构造函数里初始化state或绑定方法，你可以直接省略构造函数，类组件只保留render方法即可，代码会更简洁。

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