反应子组件不呈现

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 />;

启动react组件时不要使用小写。否则，它将被视为简单的 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>

反应子组件不呈现

React Child Component Not Rendering

jsx

reactjs

react-jsx