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

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的更多详细信息，请参见此文档。

 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收割机是正确的。 您还应该将render函数返回到html中的ID而不是.class

在您的html更改中：

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

然后在React组件的底部进行更改：

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

别忘了将D-reaper提到的组件从basicDiv重命名为BasicDiv

从技术上讲，您可以返回.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