javascript - 为什么我在屏幕上看不到我的应用程序?反应.js
问题描述
我一直在开发一个小应用程序,只是为了练习。我不知道为什么它不会在屏幕上呈现,没有任何显示。我想我错过了一些非常小的东西,但不知道那可能是什么。我还想提一下,该练习是教程的一部分,我一直虔诚地遵循这些步骤。请指教。
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render (<App/>, document.getElementById ("root"));
索引.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>
这是应用程序组件:
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
解决方案
去掉末尾的“()”
class MemeGenerator extends React.Component()
原因:超级表达式必须为 null 或函数
我建议你安装一个 linter
https://codesandbox.io/s/relaxed-hugle-kse93?file=/src/Meme.js
推荐阅读
- java - 作为 Android 开发者,如何保持更新?
- c - 如何检查pid是线程还是进程
- java - 如何从父活动调用片段中的方法?
- algorithm - 为什么 LRU 缓存使用双链表而不是单链表?
- python - 绑定方法 - Python
- angular - 显式订阅 Observable 与使用参数调用 subscribe() 之间的实际区别
- text - 如何计算 XML 中的元素数量?
- python - DataFrame().round() AttributeError: 'BlockManager' 对象没有属性 'reindex'
- azure - 如何知道是否有任何帐户可供使用 ADAL js 选择
- verilog - Verilog LRM 非确定性