- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果模板脚本标记驻留在我的组件的渲染函数中,我会收到以下错误:
在 Firefox 中: |TypeError: Node.removeChild 的参数 1 不是对象。|
在 Chrome 中:|未捕获类型错误:无法读取 null 的属性“hasAttribute”|
如果模板脚本标记放置在文档的静态部分中,则一切正常。有什么想法吗?
这是我的代码:
let React = require('react');
let ReactDOM = require('react-dom');
let qq = require('fine-uploader/fine-uploader/fine-uploader.js');
let FineUploadInputControl = React.createClass({
getInitialState: function() { return { shared: this.props.shared }; },
componentDidMount: function() {
var galleryUploader = new qq.FineUploader({
element: this.fineUploaderElement,
template: this.fineUploaderTemplate,
//template: 'qq-template-gallery',
request: {
endpoint: '/server/uploads'
},
thumbnails: {
placeholders: {
waitingPath: '/source/placeholders/waiting-generic.png',
notAvailablePath: '/source/placeholders/not_available-generic.png'
}
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
}
});
},
render: function() {
return (
<div>
<script
ref={(ref) => this.fineUploaderTemplate = ref}
type="text/template" id="qq-template-gallery">
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<div class="qq-progress-bar-container-selector qq-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumbnail-wrapper">
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale />
</div>
<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
<button type="button" class="qq-upload-retry-selector qq-upload-retry">
<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
Retry
</button>
<div class="qq-file-info">
<div class="qq-file-name">
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
</div>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text" />
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
</button>
<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
</button>
<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
</button>
</div>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text" />
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<div
ref={(ref) => this.fineUploaderElement = ref}
id="fine-uploader-gallery">
</div>
</div>
)
}
});
module.exports = FineUploadInputControl;
我添加了 Firefox 的堆栈跟踪,也许有帮助:
[197]/qq.toElement()
profile_new_discrete_single_view.component..
[197]/qq.Templating/parseAndGetTemplate()
profile_new_discrete_single_view.component..
[197]/qq.Templating()
profile_new_discrete_single_view.component..
[197]/qq.FineUploader()
profile_new_discrete_single_view.component..
componentDidMount()
profile_new_discrete_single_view.component..
.notifyAll()
vendor.bundle..
ON_DOM_READY_QUEUEING.close()
vendor.bundle..
Mixin.closeAll()
vendor.bundle..
Mixin.perform()
vendor.bundle..
batchedMountComponentIntoNode()
vendor.bundle..
Mixin.perform()
vendor.bundle..
ReactDefaultBatchingStrategy.batchedUpdates()
vendor.bundle..
batchedUpdates()
vendor.bundle..
ReactMount._renderNewRootComponent()
vendor.bundle..
ReactMount._renderSubtreeIntoContainer()
vendor.bundle..
ReactMount.render()
vendor.bundle..
[0]()
profile_new_discrete_single_view.component..
__webpack_require__()
vendor.bundle..
webpackJsonpCallback()
vendor.bundle..
最佳答案
JSX 不太适合 <script>
标签,因为它在渲染 DOM 和检测变化方面并没有真正的意义。 This Github ticket有更多信息。
如果需要将模板渲染到 DOM,可以尝试使用 dangerouslySetInnerHTML
.
<script
ref={(ref) => this.fineUploaderTemplate = ref}
type="text/template" id="qq-template-gallery">
dangerouslySetInnerHTML={{__html: `
<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
...
`}}
/>
关于javascript - ReactJS + FineUploader : Error if template resides in render() function using JSX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39453222/
您有 2 张 table : 用户 账户 一个用户可以有多个帐户。 您需要为用户添加一个帐户。使用 Sequelize,您可以将一个名为 addAccount() 的实例方法附加到 User 模型。但
每个人都看到过经典的 didFinishLaunchingMethod 运行异常。 好吧,现在我们在像 CloudKit 这样的启动时有额外的事情要咨询,更糟的是,异步的,app delegate 似
假设我想要一个 TextView 显示 5。 我假设我可以使用 TextView.setText(5)。 但在上述情况下,编译器将查找资源 id 5,而不是整数 5。 如果我真的想显示“整数”该怎么办
有一个Web应用程序的设计,我不确定如何评价它的好坏。 思路如下: 您在接受客户端请求的 Tomcat 中部署了一个 Web 应用程序(非常重要)。我猜负载可能是 Tomcat 可以处理的量。 现在实
我需要查看 getText(int resId) 方法的实现。此方法在抽象类 Context.java 中定义为 final,我在 ContextWrapper.java 和 ContextTheme
通过 mongod 启动 Mongo 后,我运行了一个耗时 300 秒的 Mongo 查询。在我的“管理员”数据库上调用 db.serverStatus() 显示 Mongo 有 resident 1
在我的 imageView 中加载 21 百万像素图像作为位图时,我的应用抛出内存不足异常。 Uri imageUri = /* URI goes here */ Bitmap bitmap = Me
我在大学的 CS 类(class)中退学了...那么,请对计算机科学有充分了解的人告诉我:与虚拟内存相关的脏和常驻的含义是什么? 而且,对于奖励积分,虚拟内存到底是什么?我正在使用 Instrumen
我正在尝试使用 MEF,但我似乎无法确定应该在哪里创建我的 AggregateCatalog 和 CompositionContainer。我找到了许多示例来说明代码应该是什么: var module
引自 What do the return values of node.js process.memoryUsage() stand for? RSS 是驻留集大小,进程内存中保存在 RAM 中的部
我的数据工厂 (v2) 管道需要调用驻留在部署到 Azure 的虚拟网络中的 REST 服务。这是一个专用网络,不面向公众。 似乎有 2 个选项: 网络事件:documentation提到它仅适用于公
你能告诉我 返回了什么吗? glm$残差和 残留物(glm)其中 glm 是一个准泊松对象。例如我将如何使用 glm$y 和 glm$linear.predictors 创建它们。 glm$残差
这是来自 Big Nerd Ranch Guide 的示例: package com.example.geoquiz; import android.os.Bundle; import android
这可能非常简单,但我在 android 开发中遇到了 settext 问题。 以下代码: TextView countDownTextView = FindViewById (Resource.Id.
我的 fragment Activity 中有以下类,现在我想从 strings.xml 中获取选项卡的名称,但我无法使用方法 getString(int resId) 它会出错消息“无法从类型 Co
NSMutableArray *fontsDetails=[[NSMutableArray alloc] init]; [fontsDetails addObject:[UIFont systemFo
我有两个字符串资源: Give us feedback at %1$s if you want to make the app even better! info@mycompany.com 我想将
我必须从两个 .dat 文件中读取数据,但是我的控制台输出函数有问题,而且我的 C++ 技能仍然生疏,有人可以帮忙吗? Read a subset of the address records fro
我正在使用 Visual C# 调试一个大型 C# 项目。项目很大,只有部分pdb是自己建的。我可以构建所有的 pdb,但这非常耗时。我正在调试回溯,但部分回溯标记有 [外部代码]。我知道缺少一些 p
这个问题在这里已经有了答案: Where is 'Top Level of the Application Bundle'? in XCode (2 个答案) 关闭 7 年前。 我总能在苹果文件的某
我是一名优秀的程序员,十分优秀!