为什么在屏幕上看不到我的应用程序？ React.js

由 发布于

我一直在研究一个小型应用程序，只是为了练习。我不知道为什么它不显示在屏幕上，所以什么也没显示。我想我缺少的东西很小，但不知道那可能是什么。我还想提及一下，该练习是教程的一部分，我一直在认真地遵循这些步骤。请指教。

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

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

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

这是App组件：

import React from "react"
import MemeGenerator from "./MemeGenerator"
import Header from "./Header"

function App (){
  return(
    <div>
      <Header />
      <MemeGenerator />
    </div>
  )
}

export default App

和主要组成部分：

import React from "react"

class MemeGenerator extends React.Component() {
    constructor() {
        super()
        this.state = {
            topText: "",
            bottomText: "",
            randomImg: "http://i.imgflip.com/lbij.jpg",
            allmemeImgs: []
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    componentDidMount() {
        fetch("https://api.imgflip.com/get_memes")
            .then(response => response.json())
            .then(response => {
                const { memes } = response.data
                this.setState({ allMemeImgs: memes })
            })
    }

    handleChange(event) {
        const { name, value } = event.target
        this.setState({ [name]: value })
    }

    handleSubmit(event) {
        event.preventDefault()
        const randNum = Math.floor(Math.random() * this.state.allmemeImgs.length)
        const randMemeImg = this.state.allmemeImgs[randNum].url
        this.setState({ randomImg: randMemeImg })
    }
    render() {
        return (
            <div>
                <form className="meme=form" onSubmit={this.handleSubmit}>
                    <input type="text" name="topText" value={this.state.topText} placeholder="Top Text" onChange={this.handleChange} />
                    <input type="text" name="bottomText" value={this.state.bottomText} placeholder="Bottom Text" onChange={this.handleChange} />
                    <button>Gen</button>
                </form>
                <div className="meme">
                    <img src={this.state.randomImg} alt="" />
                    <h2 className="top">{this.state.topText}</h2>
                    <h2 className="bottom">{this.state.bottomText}</h2>
                </div>
            </div>
        )
    }
}
export default MemeGenerator