[英]What is wrong in my “Hello World” example?
我學習了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>
但這是行不通的。 為什么不起作用?
謝謝。
錯誤在您的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)
您正在使用舊版本的ReactJS。 這就是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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.