Question

这是一段简单的代码。我试图让我的第一个组件运行，我按照教程，这是他们创建组件的代码。

它的工作原理是它确实将第一个注入到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>

Answer 1

React组件类必须大写。改变它，你的代码将起作用。有关JSX的更多详细信息，请参阅此doc。

＆＃13;

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;

Answer 2

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，你会发出很多问题似乎是有帮助的。

React.JS简单组件不渲染嵌套的html标记

2 个答案: