时间戳

首页 > 解决方案 > React 尚未渲染

javascript - React 尚未渲染

问题描述

我是这个领域的新手。我想寻求帮助。它应该加载图片；但是，它不是说我还没有渲染。有人可以帮助我吗？或者当我可以了解更多信息时推荐网站？

先感谢您。

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

标签： javascriptbabeljsrenderreact-dom

解决方案

所以这个设置的方式有点不寻常。我实际上不知道您可以在没有构建工具的情况下以这种方式使用 react，但这非常酷。

你只是在这里有一个语法错误。你需要更新这个：

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

所以 Dom 应该是全大写的 DOM

此外，如果您渲染您的组件，它将无法工作，因为它没有完全定义。你可以通过只渲染你的 Avatar 组件来测试它。

希望有帮助！

推荐阅读