如何使用react在浏览器中显示/预览.doc和.txt文件？

要在浏览器中显示/预览.doc和.txt文件，可以使用React来实现。下面是一种可能的解决方案：

首先，安装React和相关依赖。可以使用npm或yarn来安装React和其他必要的库。在命令行中运行以下命令：

npm install react react-dom

创建一个React组件，用于显示/预览文件。可以命名为FilePreview。

import React from 'react';

class FilePreview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileContent: '',
    };
  }

  componentDidMount() {
    this.loadFileContent();
  }

  loadFileContent() {
    const { filePath } = this.props;
    fetch(filePath)
      .then(response => response.text())
      .then(content => {
        this.setState({ fileContent: content });
      })
      .catch(error => {
        console.error('Error loading file:', error);
      });
  }

  render() {
    const { fileContent } = this.state;
    return (
      <div>
        <pre>{fileContent}</pre>
      </div>
    );
  }
}

export default FilePreview;

在需要显示/预览文件的地方，使用FilePreview组件，并传递文件路径作为props。

import React from 'react';
import FilePreview from './FilePreview';

function App() {
  return (
    <div>
      <h1>File Preview</h1>
      <FilePreview filePath="/path/to/file.doc" />
      <FilePreview filePath="/path/to/file.txt" />
    </div>
  );
}

export default App;

在上面的示例中，FilePreview组件会在组件加载时通过fetch函数获取文件内容，并将内容显示在pre标签中。你可以根据需要自定义样式和布局。

请注意，这只是一种基本的实现方式，具体的实现可能因项目需求和文件类型而有所不同。另外，为了使React应用能够在浏览器中运行，你需要使用适当的构建工具（如Webpack或Parcel）将React代码打包为浏览器可识别的格式。

对于.doc和.txt文件的预览，可以使用腾讯云的对象存储服务 COS（Cloud Object Storage）来存储和获取文件。你可以将文件上传到COS，并获取文件的URL作为FilePreview组件的filePath属性。有关腾讯云COS的更多信息，请参考腾讯云COS产品文档：腾讯云COS产品文档。