Question

我使用客户端渲染并遇到以下问题。

我有两个组件，它们位于两个不同的文件中

DefinitionNode

＆＃13;

class DefinitionNode extends BaseNode{
	render() {
		return (
			<div></div>
		);
	}
}

＆＃13;

BaseNode

＆＃13;

class BaseNode extends React.Component{
	render() {
		return (
			<div></div>
		);
	}
}

＆＃13;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
     
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/baseNode.jsx"></script> 
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/definitionNode.jsx"></script>

＆＃13;

转到页面后，我收到错误消息：未定义BaseNode

如何正确制作单独的组件？

Answer 1

你的jsx文件在babel处理期间被包装成封闭。如果要在文件之间共享内容，则必须将其导出。最简单的方法是分配到窗口：

class BaseNode extends React.Component {
  render() {
    return (
        <div></div>
    );
  }
}

window.BaseNode = BaseNode;

以下是plunker中的工作示例：http://plnkr.co/edit/EgYBIzv9AboHftcyuWys?p=preview

但这种方式仅适用于小型应用程序和示例。如果您正在构建严肃的内容，请使用模块系统来完成此项工作，请尝试SystemJS或Webpack，例如

React.js：如何分开jsx es6

1 个答案: