React内联样式: ReferenceError:窗口未定义

Question

当我在React组件中导入SCSS样式表时，出现了此错误：

6-9\b/.test(window.navigator.userAgent.toLowerCase())；^ server.js:614返回/msie ^ ReferenceError:未定义窗口

这是我的Home.jsx

为什么？

Answer 1

因为您在服务器上呈现视图，所以在服务器(node.js)中没有window对象

将代码更改为在客户端呈现，使用componentDidMount事件和标志

export default class AsyncMap extends Component {

  state = {
    inBrowser: false
  }

  componentDidMount() {
    this.setState({inBrowser: true});
  }

  yourCurrentRender() {...}

  render() {
    let res = null;
    if (this.state.inBrowser) {
      res = this.renderNewBehavior();
    } else {
      res = <span>Loading</span>;
    }
    return res;
  }
}

Answer 2

窗口对象仅在客户端上可用。

1.*的第一步是确保您没有进行服务器端呈现，窗口对象仅在浏览器上可用。

第二，如果您使用webpack并在webpack-dev-server模式下运行您的应用程序，您的窗口对象是不可检测的，所以

localhost: 8080/webpack-dev-server/

试一试

localhost: 8080/