Question

我是React新手，在将React代码启动到dojo 1.6 dojox.layout.ContentPane中时遇到麻烦。

如果我在某些HTML在线测试器中运行它，则它可以正常运行，而在dojo dojox/layout/ContentPane中却无法运行。

此代码有效：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root">banana</div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>, document.getElementById('root') );
    </script>
</body>

</html>

不这样做（仅在第9行添加脚本标签）：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root">banana</div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>, document.getElementById('root') );
    </script>
</body>

</html>

Answer 1

似乎是加载程序的问题（需要js），请尝试在所有react和babel脚本下方导入dojo加载程序：

like：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- dojo just below -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

请参见以下工作片段：

 
 ReactDOM.render(
    <h1>Hello, world! Im created with react</h1>, document.getElementById('root') );
    
require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dojo/domReady!"], function(BorderContainer,ContentPane) {
  var borderContainer = new BorderContainer({},"dojoContainer");
  
  var contentPanel = new ContentPane({
  	region: "center",
    style: "min-height:125px; background-color:red;",
    content:"Hello I was created with dojo !"
  });

  
	borderContainer.addChild(contentPanel);
  contentPanel.startup();
});

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body class="claro">

 
     
  
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
  <link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
  
  <div id="root">banana</div>
  <div id="dojoContainer"></div>
</body>

</html>

SyntaxError：预期的表达式，使用dojo工具箱1.6得到了'<'

1 个答案: