Question

index.js 如下：

import './index.css';
import { render } from "react-dom";
const { React } = require('react');
const { App } = require('./App');
const { serviceWorker } = require('./serviceWorker');


ReactDOM.render( < App / > , document.getElementById('root'));


serviceWorker.unregister();

和app.jsx如下：

import React from "react";
import"./App.scss";
import { Login, Register } from "./components/login/index";


export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoginActive : true
    };
  }

  componentDidMount() {
    this.rightSide.classList.add("right");
  }

  changeState() {
    const { isLoginActive } = this.state;

    if (isLoginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    }else{
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState(prevState => ({
       isLoginActive: !prevState.isLoginActive 
    }));
  }


  render() {
    const { isLoginActive } = this.state;
    const current = isLoginActive ? "Register" : "Login";
    const currentActive = isLoginActive ? "Login" : "Register";

    return (
      <div className="App">
        <div className = "login">
          <div className = "container" ref={ref => (this.container = ref)}>
            {isLoginActive && (
              <Login containerRef={ref => (this.current = ref)} />
            )}
            {!isLoginActive && (
              <Register containerRef={ref => {this.current = ref}} />
            )}
          </div>
          <RightSide
            current={current}
            currentActive={currentActive}
            containerRef={ref => (this.rightSide = ref)}
            onClick={this.changeState.bind(this)}
            />
        </div>
      </div>
    );
  }
}


const RightSide = props => {
  return (
    <div
      className = "right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  );
};



export default App;

在“npm start”上出现以下错误：

<块引用>

编译失败 src\index.js 第 14:1 行：'ReactDOM' 未定义为 no-undef

搜索关键字以详细了解每个错误。

我的 React 和 ReactDOM 是最新且兼容的。我无法找出解决此问题的方法。任何形式的帮助将不胜感激。谢谢！！

Answer 1

你必须像下面一样更正react-dom的import语句。

import ReactDOM from "react-dom";

Answer 2

你必须导入它：

https://reactjs.org/docs/react-dom.html

import ReactDOM from 'react-dom'

'ReactDOM' 未定义 no-undef

2 个答案: