Question

我是反应灵的新手。我有多个页面的多个班级。我收到了错误：

ReferenceError：未定义WelcomeView

Chat.js：

var Chat = React.createClass({

render: function() {
 return (
  <div>
    <WelcomeView />
    <MainView />
  </div>
);
}

});

ReactDOM.render(<Chat />, document.getElementById('app'));

WelcomeView和MainView位于另一页。

WelcomeView.js：

var WelcomeView = React.createClass({

render: function() {
  ...
}

}

});

index.html中的

：

<script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

<script src="script/WelcomeView.js" type="text/babel"></script>
<script src="script/MainView.js" type="text/babel"></script>
<script src="script/Chat.js" type="text/babel"></script>

Answer 1

没有对WelcomeView和MainView组件的引用。

WelcomeView.js

window.WelcomeView = React.createClass({    
    render: function() {
        ...
    } 
});

Chat.js

var MainView = window.MainView;
var WelcomeView  = window.WelComeView;

var Chat = React.createClass({    
    render: function() {
        return (
            <div>
                <WelcomeView />
                <MainView />
            </div>
        );
});

ReactDOM.render(<Chat />, document.getElementById('app'));

编辑：Kesh Shan是对的。您没有使用模块捆绑器，因此导入将不起作用。将类附加到窗口可能会有所帮助。

如何从另一个js页面反应器中渲染组件？

1 个答案: