Question

我是ReactJS的新手。我尝试了以下内容，但未能看到“topBar”（react元素）相关内容：

    require(['react', 'ReactDOM', 'topBar'], function (React, ReactDOM, topBar) {

    var App = React.createClass({
        displayName: 'App',

        render: function () {
            return React.createElement(
                'div',
                { className: 'designer-layout' },
                React.createElement('topBar', null)
            );
        }
    });
    var r = ReactDOM.render(React.createElement(App, null), document.getElementById("web-designer-container"));
});

topBar.js的代码如下所示：

define('topBar', ['react'], function (React) {
    return React.createClass({
        render: function () {
            debugger;
            return React.createElement(
                'div',
                { className: 'top-bar' },
                React.createElement(
                    'div',
                    { className: 'title ' },
                    'Web test'
                )
            );
        }
    });
});

以下是htm：

<html>
<head>
        <script src="jquery-2.2.0.js"></script>
        <script src="require.js"></script>


</head>
<body>
<div id="web-designer-container">

</div>
        <script>
            require.config({
                baseUrl: '',
                paths: {
                    "react": 'react-0.14.2',
                    "ReactDOM": 'react-dom'
                }
            });
            //require(['app'], function(app) { app(); });
            //require(['app']);
        </script>
        <script src="app.js"></script>
</body>
</html>

“app”被渲染但不是“topBar”（正确）。我错过了什么？

更新（包括JSX）：

require(['react', 'ReactDOM', 'topBar'],
    function (React, ReactDOM, topBar) {
        var App = React.createClass({
            render: function () {
                return (
                        <div className="designer-layout">
                            <topBar />
                        </div>
                    );
            }
        });
        var r = ReactDOM.render(<App />, document.getElementById("web-designer-container"));
    });

define('topBar', ['react'], function (React) {
    return React.createClass({
        render: function () {
            return (
                <div className="top-bar">
                            <div className="title ">Web Test</div>
                        </div>                  
                );
        }
    });
});

Answer 1

不要使用camel-casing作为组件名称。试试

<TopBar/>

无法执行基本的Reactjs脚本示例

1 个答案: