TypeError：无法将属性“src”设置为 null答案

【问题标题】：TypeError: Cannot set property 'src' of nullTypeError：无法将属性“src”设置为 null
【发布时间】：2023-03-06 17:36:01
【问题描述】：

我正在尝试使用 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' of null

并指向下面的代码

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

有什么建议吗？

【问题讨论】：

你可能想使用ref

标签： javascript html jquery reactjs

【解决方案1】：

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

source code

 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,
    };

我在文档中没有看到 id 字段，这可能就是您的选择器返回 null 的原因。

您应该只使用这个字段：fileType、filePath、onError、errorComponent、unsupportedComponent。

如果你出于某种原因想要对元素进行 DOM 操作，为此你可以用 div 包装你的元素：

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

但我建议使用refs

【讨论】：

@AniketYadav 好，你可以把我的答案设置为正确
你能举个例子吗？将其与 id 一起使用时，文档会被放大并仅显示一半的内容。
@AniketYadav refs 只是获取 DOM 元素，缩放问题是另一个问题
当我从 div 中删除 id 元素时，它会给出错误，但在关闭错误窗口文件后会完美呈现。一旦我在 div.. 中插入 id 元素，就不会出现任何错误，并且 docx 文件内容被处理和缩放。知道为什么会这样吗？
我认为你的div 和id 的position 有问题。

【解决方案2】：

我认为这是因为

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

你能在开发者工具中查看 React 是否真的用这样的 id 渲染元素 - output-frame-id？我知道你的组件中有这个 id，但是 React 没有必要渲染它......这取决于 FileViewer 的实现，这个组件可能不支持 id 属性，因为这是一个自定义组件。

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

使用引用
在 id 前使用冒号

:id="output-frame-id"

【讨论】：