代码之家 › 专栏 › 技术社区 › Andrey Bushman

我的“Hello World”例子有什么问题?

reactjs javascript

Andrey Bushman · 技术社区 · 6 年前

这是我的简单代码:

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>

但它不起作用。为什么不起作用?

非常感谢。

2 回复 | 直到 6 年前

Joel Lord 6 年前

错误在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)

Shubham Yerawar 6 年前

您正在使用旧版本的ReactJS。这是反应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);

推荐文章