这是一段简单的代码。我试图让我的第一个组件运行,我按照教程,这是他们创建组件的代码。
它的工作原理是它确实将第一个注入到html文档中但缺少了。
由于某些原因,它对视频中的教师非常有效,正如您在此处所见:https://youtu.be/G40iHC-h0c0?t=392
import React from "react";
import { render } from "react-dom";
class basicDiv extends React.Component {
render(){
return(
<div>
<h1>Hi my friend</h1>
</div>
);
}
}
render(<basicDiv/>, window.document.querySelector(".componentPlaceHolder"));
这是index.html文件:
<!doctype html>
<html>
<head>
</head>
<body>
<div class="componentPlaceHolder" style="border:1px solid black;min-height:100px;">
</div>
<script src="/app/bundle.js"></script>
</body>
</html>
答案 0 :(得分:4)
React组件类必须大写。改变它,你的代码将起作用。有关JSX的更多详细信息,请参阅此doc。
class BasicDiv extends React.Component {
render(){
return(
<div>
<h1>Hi my friend</h1>
</div>
);
}
}
ReactDOM.render(<BasicDiv/>, window.document.querySelector(".componentPlaceHolder"));
&#13;
<!doctype html>
<html>
<head>
<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>
</head>
<body>
<h2>This is a Skeleton React Build</h2>
<p>It uses babel to convert ES6 code to ES5</p>
<p>This is a good place to start building your app. This is a blank canvas.</p>
<h2>Below is where my first component will be injected</h2>
<p>If you see anything in the box below... it works!</p>
<div class="componentPlaceHolder" style="border:1px solid black;min-height:100px;">
</div>
<script src="/app/bundle.js"></script>
</body>
</html>
&#13;
答案 1 :(得分:1)
D-reaper是正确的。您还应该将render函数返回到html中的ID而不是.class
在你的html更改中:
<div class=componentPlacholder>
to <div id="componentPlaceholder">`
然后在React组件的底部更改:
render(<basicDiv/>, window.document.querySelector(".componentPlaceHolder"));
to render(<BasicDiv />, getElementById(componentPlacholder));
别忘了将你的组件从basicDiv重命名为BasicDiv作为D-reaper提到
你可以在技术上返回.class但是因为看起来你正在学习它,如果你没有返回ID,你会发出很多问题似乎是有帮助的。