个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
(使用浏览器中的 JSX 转换器)当从普通 javascript 调用一个 React 组件时，我得到一个 Uncaught ReferenceError。
我尝试从我的 javascript 应用程序调用 React.js (0.12.2) 组件。我有一个 JQuery document.ready 处理程序来执行此操作。
看起来，浏览器中的 JSX 编译器需要一些时间才能准备好使用 React 的组件。
在这种情况下，Document.ready 可能不是一个选项。
请看下面的例子:
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<script src="jquery-2.1.3.min.js"></script>
<script src="react-0.12.2/JSXTransformer.js"></script>
<script src="react-0.12.2/react.js"></script>
<script type="text/jsx" src="reactComponent.js"/>
<script src="app.js"/>
</head>
<body>
<div id="target"></div>
</body>
应用程序.js:
$(function () {
console.log("app.js: " + typeof MyComponent);
init();
});
组件.js:
var MyComponent = React.createClass({
render: function () {
return (<div>works</div>)
}
});
function init() {
console.log("init: " + typeof MyComponent);
React.renderComponent(<MyComponent/>, document.getElementById("target"));
}
在日志中的浏览器输出中运行:
app.js: undefined
app.js: Uncaught ReferenceError: init is not defined
但是当我通过 jsx 转换器加载 app.js 时，通过在脚本标记中添加 type="text/jsx"，它起作用了:
app.js: function
reactComponent.js: init: function
有没有其他方法可以等待 JSX 转换器完成，而不是加载类型为 text/jsx 的所有 js 文件？我是对的吗，这真的是特定于浏览器中的 JSX 转换器
最佳答案
如果可以的话，我建议您切换到 JSX 预编译器工作流程(例如，如果您使用的是 NodeJS，则使用 gulp 或 grunt)。这样，您就不必担心这个排序问题。
在您可以切换之前，我建议您将应用程序初始化放在最后加载的 text/jsx 脚本文件中。这样，它将始终在 DOM 完全加载并准备好使用后执行。如果进行此更改，则不需要依赖 jQuery 事件。
您甚至可以将最后一个文件切换为仅作为 test/jsx 处理，即使它当前可能不包含任何 JSX 功能:
<script src="app.js" type="text/jsx"></script>
(顺便说一下，您不应该为 script 使用自闭合标签，请参阅 here)。
关于javascript - 如何在调用渲染组件之前在浏览器 JSX 编译器中等待，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28657210/
24
4
0
typescript 抛出: Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 更改后tsconfig.json jsx至 re
我正在尝试使用 JSX 表达式作为另一个 JSX 表达式的生成主体的一部分: render() { return ( {[...Array(5).keys()].
eslint jsx-quotes 规则在 Visual Studio 代码中不起作用。配置: .eslintrc.json: { "plugins": ["jsx"], "parse
如果我声明 var A = new Set(...........); var B = new Set(...........); 是否有 JSX 操作来计算两组 A - B 的差异？ 最佳答案
这个问题在这里已经有了答案: How to render react components by using map and join? (18 个答案) 关闭 5 年前。 我遇到过这样的情况，我有
完成执行另一个 .jsx 脚本后，如何让我的 .jsx 脚本？ 也许这将有助于理解我正在尝试做的事情: // WebCard.jsx file function mySnippet(){ //
JSX 不允许多次指定一个属性。 F.ex. /* /* where obj contains an attribute called "prop1" */ 属性的顺
我在尝试使用循环数组构建自定义组件时遇到问题，该循环数组有条件地呈现不同的元素。该组件包含特殊的类名，用于生成每行 3 个元素的网格，与传递给组件的参数数量无关。 我正在使用 map用于遍历条件索引，
我有一个要从 JS 转换为 TS 的 React 项目。我遇到的一个问题是 TSX React 假设功能组件中定义的所有属性都是必需的 Prop 。 // ComponentA.tsx class C
我有一个通过数组映射的 React 组件。 每个数组项都有一个可选的 ID 类型。 如果我有这个 ID，我将渲染一个元素，否则什么都不渲染。 这个元素有一个 onClick 调用函数接受 ID 作为参
我目前正在编写一个带有 ref 元素的 StencilJS 组件，我需要将其作为 @Prop 传递给另一个元素。像这样: this.canvas = el}> 创建颜色选择器时，this.canv
我正在尝试将对象传递给 react 中的 jsx 标记的值 我将标签选项的值设置为一个对象 onChange 我得到了标签 中的值并用值设置本地状态 我控制台记录了本地状态，但它返回了 [objec
我正在尝试使用 Chart.js 和 Typescript 在 React 中构建应用程序，但是当尝试渲染折线图时，我在这一行收到上述错误: . 除此之外，我还收到消息“类型‘ChartCompone
我正在使用一个变量来有条件地显示不同的 JSX，并且它没有使用在其父函数中定义的样式。我怎样才能做到这一点？ 您可以在此处查看演示:https://codesandbox.io/s/styled-js
使用 Nextjs 和 styled-jsx 我编写了下面的组件。 现在我想知道如何将 styled-jsx 应用于从 getLinks 方法返回的 jsx。 在下面的示例中，来自 getLinks
所以我现在的问题是，如果我有一个 JSX 父组件，但我需要包含一个 html 标签，例如 我认为 React JSX 不支持它(如果我错了请纠正我)我可以混合使用 jsx 和非 jsx 组件吗？我个人
我正在编写一个 react 应用程序来从嵌套对象数组中打印 TreeView 。每个节点都应该是可折叠的(默认打开)。一个节点可以有任意数量的子节点。这是我想要实现的示例: 我正在将所有节点组件收集到
它不是 React 项目，也不是 V-DOM 相关的。我只需要一个 jsx 运行时编译器到 (HTML/XML) 字符串，稍后将用作 element.innerHTML = result 它应该用作支
当 jsx 跨越多行时，哪种 eslint 规则更喜欢前者而不是后者？目前 prettier 正在从 preferred 变为 notPreferred const preferred = (
我正在使用 IDEA 2017.2。我需要设置 JSX codestyle，这样大括号之间就有空格，比如 { event.series } 。但是，它会将其自动格式化为 {event.series}
我是一名优秀的程序员,十分优秀！