Question

我正在尝试使用react-file-viewer预览.docx文件

<FileViewer
    fileType={'docx'}
    filePath={this.state.file} //this.state.file has path of the url data
    id="output-frame-id"
    allowFullScreen={true}
/>

当用户单击.docx文件进行预览时，将引发异常：

TypeError：无法将属性'src'设置为空

并指向下面的代码

let srcData = URL.createObjectURL(this.response); // It contains a Response type of blob
error at this line ---> document.querySelector('#output-frame-id').src = srcData;

有什么建议吗？

Answer 1

https://github.com/plangrid/react-file-viewer

source code

我在文档 id 字段中没有看到，也许这就是为什么您的选择器返回FileViewer.propTypes = { fileType: PropTypes.string.isRequired, filePath: PropTypes.string.isRequired, onError: PropTypes.func, errorComponent: PropTypes.element, unsupportedComponent: PropTypes.element, }; FileViewer.defaultProps = { onError: () => null, errorComponent: null, unsupportedComponent: null, };的原因。

您应仅使用以下字段：null，fileType，filePath，onError，errorComponent。

如果出于某种原因要对元素进行DOM操作，则可以使用unsupportedComponent包装元素：

div

但是我建议使用refs

Answer 2

我认为这是因为

document.querySelector('#output-frame-id') // equal to null

您可以签入开发人员工具吗，React是否真的使用这样的ID- output-frame-id 渲染元素？我知道您的组件中有这个ID，但是React不必渲染它……这取决于FileViewer的实现，该组件可能不支持id属性，因为这是一个自定义组件。

我不确定，但是，您可以尝试使用：

使用引用
在ID之前使用冒号

:id="output-frame-id"

TypeError：无法将属性'src'设置为null

2 个答案: