Question

我有一个React JS文件，它呈现以下内容：

React.render(
    <TreeNode node={tree} />,
    document.getElementById("tree")
);

我通过以下方式从HTML文件中引用它：

<!doctype html>
<html lang="en">

<link rel="stylesheet" href="app/listTree/treenode.css">

<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
    <script src="/listTree/TreeNode.js"></script>
</div>

</html>

但是，不会显示JS文件的内容。

我没有使用JavaScript的经验。为什么会这样？

Answer 1

您的脚本已经在选择tree div元素。因此，无需在div标签的中放置脚本标记。

<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="app/listTree/treenode.css"> </head> <body> <h3>It's <code>TreeNodes</code> all the way down</h3> <p>Edit the <code>tree</code> variable to change the tree</p> <div id="tree"> </div> <script src="listTree/TreeNode.js" type="text/jsx"></script> </body> </html>

您还缺少<head>和<body>个html代码。

此外，如果您想在React代码中渲染jsx，您还需要为它们添加<script>标记（以及type="text/jsx"作为标记属性）：

<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="app/listTree/treenode.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> </head> <body> <h3>It's <code>TreeNodes</code> all the way down</h3> <p>Edit the <code>tree</code> variable to change the tree</p> <div id="tree"> </div> <script src="listTree/TreeNode.js" type="text/jsx"></script> </body> </html>

修改

作为确保您的环境正常运行的测试（并且您的组件中没有问题。请尝试使用以下内容替换Treenode.js中的代码：

React.render( <div>Testing...</div>, document.getElementById("tree") );

然后，您没有外部依赖项。如果您看到Testing...已呈现，则表示您已正确设置环境。

Answer 2

以下是我如何使用它添加以下脚本

<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

并将类型更改为＆＃39; text / babel＆＃39;

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

和外部js文件应该是

.jsx

扩展名

请参阅工作示例here

Answer 3

尝试在div之后加载脚本而不是

<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>

您还需要加载React

Answer 4

您不应在“listTree”之前放置斜杠。

所以你的脚本标签应如下所示：

Project's General tab

反应如何将JS文件与HTML文件连接

4 个答案: