javascript 反应如何将 JS 文件与 HTML 文件连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32737307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React how to connect JS file with HTML file
提问by octavian
I have a React JS file which renders the following:
我有一个 React JS 文件，它呈现以下内容：
React.render(
<TreeNode node={tree} />,
document.getElementById("tree")
);
I reference it from a HTML file in the following way:
我通过以下方式从 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>
However, the contents of the JS file are not displayed.
但是不显示JS文件的内容。
I don't have experience in working with JavaScript. Why is this happening?
我没有使用 JavaScript 的经验。为什么会这样？
回答by Davin Tryon
Your script is already selecting the treediv element. So, there is no need to put a script tag insideof the div tag.
您的脚本已经在选择treediv 元素。因此，无需在 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>
You are also missing the <head>and <body>html tags.
您还缺少<head>和<body>html 标签。
Further, if you want to render jsx in your React code, you need to add <script>tags for them as well (and type="text/jsx"as a tag attribute):
此外，如果你想在你的 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>
EDIT:
编辑：
As a test to make sure your environment is working (and you don't just have a problem in your Component. Try to replace the code inside Treenode.jswith this:
作为测试以确保您的环境正常工作（并且您的组件不仅有问题。尝试将其中的代码替换为Treenode.js：
React.render(
<div>Testing...</div>,
document.getElementById("tree")
);
Then, you have no external dependencies. If you see Testing...rendered, you know that the environment is set up correctly.
然后，您没有外部依赖项。如果您看到Testing...渲染，您就知道环境设置正确。
回答by Giridhar Bandi
Here is how I get it working add the following script
这是我如何让它工作添加以下脚本
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
and change the type to 'text/babel'
并将类型更改为“text/babel”
<script type="text/babel" src="script.js"></script>
and the external js file should be with
并且外部js文件应该与
.jsx
.jsx
extension
延期
please see working example here
请在此处查看工作示例
回答by Fran?ois Richard
Try to load your script after your div and not inside
尝试在 div 之后而不是在里面加载脚本
<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>
You need to load React also
您还需要加载 React
回答by Nicholas Ang
You should not place a slash before "listTree".
您不应该在“listTree”之前放置斜线。
So your script tag should look like this:
所以你的脚本标签应该是这样的：
<script src="listTree/TreeNode.js"></script>
