Question

我是这个领域的新手。我想寻求帮助。本来是要装张图片的。但是，不是说我还没有渲染。有人可以帮我吗？或在我可以了解更多信息时推荐网站？

谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--REACT LIBRARY-->
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!--REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
     
    <title>FriendLy</title>
</head>
<body>
    <div id="app">React has not rendered yet</div>

    <script type="text/babel">

    //FriendLy Complex Component
    function FriendLy(){
        return( 
            <div>
                <Avatar/>
                <UserName/>
                <GetConnected/>
            </div>
        );
    }

    //Avatar Component
    function Avatar(){
        return (
            <img src="https://scontent.ftpf1-1.fna.fbcdn.net/v/t1.0-9/87995869_3235932739767864_4174493673800597504_n.jpg?_nc_cat=107&_nc_sid=09cbfe&_nc_ohc=BOdWu5KFnBwAX9X9FDz&_nc_ht=scontent.ftpf1-1.fna&oh=44631cd3c84d98db17c14bc9ea213f73&oe=5F1B1D6A" alt="profile pic"/>
        );
    }

    ReactDom.render(
        <FriendLy/>,
        document.getElementById("app")
    );
    
    
    
    </script>
    
</body>
</html>

Answer 1

因此，这种设置方式有点不寻常。我实际上不知道没有构建工具，您是否可以消耗这种方式的响应，但这很酷。

这里只是语法错误。您需要更新此内容：

ReactDom.render(...) to ReactDOM.render(...)

因此，Dom应该全部使用大写字母

此外，如果渲染组件，则由于未完全定义，它将无法使用。您可以通过渲染Avatar组件来对其进行测试。

希望有帮助！

React尚未渲染

1 个答案: