Question

我正在使用JSX创建分层的React组件。代码没有显示任何错误，但我的页面上没有显示任何内容。这是我的代码如下。

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var Converter = React.createClass({
            render: function() {
                return <inputBox />;
            }
        });

        var inputBox = React.createClass({
            render: function() {
                return <h1>Hello World!</h1>;
            }
        });

        ReactDOM.render(
            React.createElement(Converter, null),
            document.getElementById('app'),
        );
    </script>
</body>
</html>

当我使用

时

ReactDOM.render(
    React.createElement(inputBox, null),
    document.getElementById('app')
);

Hello World！显示出来。我究竟做错了什么？我已经尝试了很多调试，但无法弄清楚任何事情。

Answer 1

            return <InputBox />;

而不是

            return <inputBox />;

启动反应组件时不要使用小写。否则，它将被视为简单的HTML标记。

Answer 2

而不是

var inputBox = React.createClass({

使用此：

var InputBox = React.createClass({

因为react组件必须以大写字母开头，否则它将被视为html元素。

检查工作代码段：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var Converter = React.createClass({
            render: function() {
                return <InputBox />;
            }
        });

        var InputBox = React.createClass({
            render: function() {
                return <h1>Hello World!</h1>;
            }
        });

        ReactDOM.render(
            <Converter/>,
            document.getElementById('app'),
        );
    </script>
</body>
</html>

反应子组件不呈现

2 个答案: