Question

我目前正在调查并尝试创建基本的个人资料卡。

我的代码是

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Profile</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

    <script type="text/jsx">
        var App = React.createClass({
            render: function(){
                return (
                    <div>
                        <Profile />
                        <Hobbies />
                    </div>
                );
            }
        });

        var Profile = React.createClass({
            render: function(){
                return (
                    <div>              
                        <h3>John Smith</h3>
                        <img src='http://lorempixel.com/100/100/' alt='John Smith' />
                    </div>
                );
            }
        });

        var Hobbies = React.createClass({
            render: function(){
                return (
                    <div>
                        <h5>My hobbies:</h5>
                        <ul>
                            <li>Coding</li>
                            <li>Designing</li>
                            <li>Guitar</li>
                        </ul>
                    </div>
                );
            }
        });

        ReactDOM.render(<App />, document.body);
    </script>

</head>
<body>

</body>
</html>

但是当我在浏览器中打开我的html页面时，它根本不呈现任何内容。我错过了什么？

我的控制台日志中没有出现任何错误。

Answer 1

那是因为你正在使用JSX，你需要让Babel将其转换为React函数调用。

在您的代码中添加此脚本，其中包含react和react-dom。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

包含此内容后应该有效。

基本的React帮助 - 没有任何显示

1 个答案: