[英]React Component not rendering to HTML
由於我無法弄清楚的原因,HTML 似乎沒有加載snippetInfo.js。 我在網上沖浪了很多,但解決方案不起作用。 如果我將type='text/javascript'
到腳本標記中,我會收到錯誤Uncaught SyntaxError: Unexpected token '<'
我相信這與我的 React 配置有關,或者 package.json 文件中缺少某些內容。 請告訴我。
索引.html:
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" ></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" ></script>
</head>
<body>
<h1>Snippet #1234</h1>
<div id="snippetinfo"></div>
<script src="snippetInfo.js" ></script>
</body>
</html>
片段信息.js:
class UpdateButton extends React.Component {
render() {
return (
<button className='Update'>Update Info</button>
);
}
}
class SnippetInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Snippet Info Here...',
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Snippet Info was updated');
event.preventDefault();
}
render () {
const status = 'Next player: Joe';
return (
<div>
<div className='status'>{status}</div>
<div className='form'>
<form onSubmit={this.handleSubmit}>
<label>
Snippet Info:
<textarea value={this.state.value} onChange={this.handleChange}/>
</label>
<input type='submit' value='Submit' />
</form>
</div>
</div>
);
}
}
ReactDOM.render(
<SnippetInfo />,
document.getElementById("snippetinfo")
);
包.json
{
"name": "Urania",
"version": "1.0.0",
"description": "<html> <head> <style> /************************************* GENERAL *************************************/ body { margin: 15; padding: 0; font: 12px/1.4em \"Lucida Grande\", Verdana, sans-serif; color: #333; overflow-y: scroll; text-rendering: optimizeLegibility; background-color: #F2F2F2; }",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jhyuen/urania.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jhyuen/urania/issues"
},
"homepage": "https://github.com/jhyuen/urania#readme",
"devDependencies":{
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"babel-core": "^6.1.*",
"babel-loader": "^6.2.*",
"babel-preset-es2015": "^6.16.*",
"babel-preset-react": "^6.16.*",
"webpack": "^1.13.*",
"webpack-dev-server": "^1.16.*"
},
"dependencies":{
"react": "^16.11.0",
"react-dom": "^16.11.0"
}
}
我在腳本標簽中添加了"type='text/babel'"
,它可以工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.