Javascript ReactDOM.render呈现页面_Javascript_Html_Reactjs

Javascript ReactDOM.render呈现页面

javascript html reactjs

Javascript ReactDOM.render呈现页面,javascript,html,reactjs,Javascript,Html,Reactjs,对ReactJS来说是新的，无法找到此页面未显示任何内容的原因- <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="react.16.8.6.development.js"></sc

对ReactJS来说是新的，无法找到此页面未显示任何内容的原因-

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <script src="react.16.8.6.development.js"></script>
            <script src="react-dom.16.8.6.development.js"></script>
            <script src="babel.7.5.4.min.js"></script>
        </head>

        <body>
            <div id="container"></div>

            <script type="text/babel">

                class MyClass extends React.Componet{
                    render() {
                        return(<h1>Hello React Componets!</h1>);
                    }
                }

                ReactDOM.render(
                    <h1>MyClass</h1>,
                    document.getElementById('container')
                );
            </script>
        </body>
    </html>


类MyClass扩展了React.Componet{
render（）{
return（你好；
}
}
ReactDOM.render(
我的班级，
document.getElementById（'容器'）
);

控制台中出现错误-

VM43:19未捕获的TypeError:超级表达式必须为null或位于_处的函数继承（：19:113）时间：26:3 在：42:2

尝试以下代码：

<script type="text/babel">

    class MyClass extends React.Component{
        render() {
            return(<h1>Hello React Componets!</h1>);
        }
    }

    ReactDOM.render(
        <h1><MyClass/></h1>,
        document.getElementById('container')
    );
</script>


类MyClass扩展了React.Component{
render（）{
return（你好；
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

尝试以下代码：

<script type="text/babel">

    class MyClass extends React.Component{
        render() {
            return(<h1>Hello React Componets!</h1>);
        }
    }

    ReactDOM.render(
        <h1><MyClass/></h1>,
        document.getElementById('container')
    );
</script>


类MyClass扩展了React.Component{
render（）{
return（你好；
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

你的问题就在这里

<h1>MyClass</h1>, //This is not a react component, this will only print `MyClass` as text on page

MyClass，//这不是react组件，它将只在页面上以文本形式打印'MyClass'

只要改变一下

ReactDOM.render(
     <h1>MyClass</h1>,
     document.getElementById('container')
);

ReactDOM.render(
我的班级，
document.getElementById（'容器'）
);

对此,

ReactDOM.render(
    <MyClass />,
    document.getElementById('container')
);

ReactDOM.render(
,
document.getElementById（'容器'）
);

注意：更正代码中的输入错误，

class MyClass extends React.Componet

应该是

class MyClass extends React.Component{

你的问题就在这里

<h1>MyClass</h1>, //This is not a react component, this will only print `MyClass` as text on page

MyClass，//这不是react组件，它将只在页面上以文本形式打印'MyClass'

只要改变一下

ReactDOM.render(
     <h1>MyClass</h1>,
     document.getElementById('container')
);

ReactDOM.render(
我的班级，
document.getElementById（'容器'）
);

对此,

ReactDOM.render(
    <MyClass />,
    document.getElementById('container')
);

ReactDOM.render(
,
document.getElementById（'容器'）
);

注意：更正代码中的输入错误，

class MyClass extends React.Componet

应该是

class MyClass extends React.Component{

React.Componet

吸引了我的眼球……：）（应该是

组件

）谢谢。有什么方法可以捕捉到这种错误吗？像这样的事情很棘手。JavaScript解释器无法真正理解它是一个打字错误，它只看到一个未定义的值。我还注意到，在

ReactDOM.render

call-

MyClass

中有类本身。为了正确呈现组件，您需要应该像对待HTML标签一样对待它-例如，

。否则你将无法得到你想要的结果。谢谢。是的，我已经做到了。谢谢

React.Componet

吸引了我的眼球…：）（应该是

组件

ReactDOM.render

call-

MyClass

中有类本身。为了正确呈现组件，您需要应该像对待HTML标签一样对待它-例如，

。否则你将无法得到你想要的结果。谢谢。是的，我已经做了。谢谢