javascript - 我的 "Hello World"示例有什么问题？

Question

我学习ReactJS并通过“清晰的ReactJS”尝试使用它。

这是我的简单代码:

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>

但是这不起作用。为什么不起作用？

谢谢。

Answer 1

错误出现在您的 const 组件行中。 ReactDOM.render 函数的第一个参数应该是一个实际的组件。组件是通过使用 React.createElement 生成的(就像您在 MyList 组件的 render() 函数中所做的那样。这是一个工作示例: 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)