React.JS简单组件无法呈现嵌套的html标签

Question

This is a simple piece of code. 这是一段简单的代码。 I am trying to get my first component to run and I followed the tutorial and this is their code for creating the component. 我试图使我的第一个组件运行，并且按照教程进行操作，这是他们用于创建该组件的代码。

It works in that it does inject the first into the html document but the is missing. 它的工作原理是将第一个注入html文档，但是缺少了。

For some reason it worked perfectly for the instructor in the video, as you can see here: https://youtu.be/G40iHC-h0c0?t=392 由于某些原因，它对于视频中的讲师非常有效，如您在此处看到的： 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"));

here is the index.html file: 这是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 component class has to be capitalised. React组件类必须大写。 Change that and your code will work. 更改它，您的代码将起作用。 See this doc for more details on JSX. 有关JSX的更多详细信息，请参见此文档。

 class BasicDiv extends React.Component { render(){ return( <div> <h1>Hi my friend</h1> </div> ); } } ReactDOM.render(<BasicDiv/>, window.document.querySelector(".componentPlaceHolder"));

 <!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>

Answer 2

D-reaper is correct. D收割机是正确的。 You should also return the render function to an ID in your html rather than to a .class 您还应该将render函数返回到html中的ID而不是.class

In your html change: 在您的html更改中：

<div class=componentPlacholder>
to <div id="componentPlaceholder">`

Then at the bottom of your React component change: 然后在React组件的底部进行更改：

render(<basicDiv/>, window.document.querySelector(".componentPlaceHolder"));
to render(<BasicDiv />, getElementById(componentPlacholder));

Don't forget to rename your component from basicDiv to BasicDiv as D-reaper mentioned 别忘了将D-reaper提到的组件从basicDiv重命名为BasicDiv

You can technically return to a .class but since it looks like you are learning it seemed helpful to alert you that you will cause yourself a lot of issues if you are not returning to an ID. 从技术上讲，您可以返回.class，但是由于您似乎正在学习，因此警告您似乎很有帮助，如果您不返回ID将会导致很多问题。

React.JS简单组件无法呈现嵌套的html标签

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-06-06 04:07:08

解决方案2
1 2017-06-06 04:27:56

React.JS简单组件无法呈现嵌套的html标签

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-06-06 04:07:08

解决方案2 1 2017-06-06 04:27:56

解决方案1
4 已采纳 2017-06-06 04:07:08

解决方案2
1 2017-06-06 04:27:56