我的“ Hello World”示例出了什么问题？

Question

I learn ReactJS and try to use it through the "clear ReactJS".

This is my simple code:

 class MyList extends React.Component{ constructor(data){ super(data) this.text = data.text } render(){ return React.createElement("h1", null, this.props.text) } } const root = document.getElementById("root") const component = new MyList({text:"abcdefgh"}) ReactDOM.render(component,root) 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

But it doesn't work. Why it doesn't work?

Thank you.

Answer 1

The error is in your const component line. The first argument of your ReactDOM.render function should be an actual component. Components are generated by using React.createElement (just like you did in your render() function for your MyList component. Here is a working example: https://jsbin.com/lejuwet/1/edit?html,js,output

class MyList extends React.Component{

        constructor(data){
            super(data)
            this.text = data.text
        }

        render(){
          console.log("render");
            return React.createElement("h1", null,
            this.props.text)
        }
    }

const root = document.getElementById("root")
const component = new React.createElement(MyList, {text: "123"});
ReactDOM.render(component, root)

Answer 2

You are using older version of ReactJS. This is how it looks with React v16.

import React,{ Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return(
      <h1>Hello World</h1>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);