如何在react typescript中引用文档？
在React TypeScript中引用文档可以通过以下步骤实现：
- 首先，确保你已经安装了React和TypeScript的开发环境。
- 创建一个新的React TypeScript项目，可以使用Create React App工具来快速搭建项目结构。
- 在项目中创建一个新的组件或者在现有组件中引用文档。
- 在组件中引用文档可以通过使用import语句来实现。例如，如果你想引用一个名为"example.docx"的文档，可以在组件文件的顶部添加以下代码：
import exampleDoc from './example.docx';- 确保文档文件与组件文件在同一目录下，或者根据实际情况调整引用路径。
- 现在，你可以在组件中使用引用的文档。例如，你可以将文档作为链接或按钮的目标，或者在需要时将其显示在页面上。
需要注意的是，React TypeScript中引用文档的方式与普通的JavaScript项目没有太大区别。关于React TypeScript的更多信息和用法，你可以参考腾讯云的React TypeScript文档：React TypeScript文档。
请注意，以上答案仅供参考，具体的实现方式可能因项目配置和需求而有所不同。
相关·内容
尝试使用react-pdf渲染一个pdf，我发誓我已经完成了他们的文档的所有配置，但没有任何工作。我不断地得到
ReferenceError: $RefreshReg$ is not defined
概念证明组件。是的，在这段代码中没有使用这些选项，但我尝试过使用它。我尝试将cmap直接引入到这个组件中并在那里引用它。我尝试了复制webpack插件，并完全按照文档中的建议操作。没有一样东西起作用。总是出现同样的错误。希望我错过了一些小细节。
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @ty
浏览 64提问于2021-04-14得票数 0
我正在尝试为我的REACT-TypeScript项目配置eslint。它之前使用的是即将弃用的tslint。我浏览了网页，最终创建了我的.eslintrc.json
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json",
"ecmaVer
浏览 1提问于2020-01-21得票数 11
1回答
我已经启动了一个使用cli生成的反应本机项目。这个应用程序似乎运行得很好，但我注意到导入指向类型记录缓存，而不是本地node_modules。我甚至不使用打字本。
IDE: vscode 1.19.3
import React, { Component } from 'react';
模块"/Users/MyMac/Library/Caches/typescript/2.6/node_modules/@types/react/index“
浏览 0提问于2018-01-27得票数 10
回答已采纳
1回答
我不能使用scss文件中的图像路径作为滚动包的背景。
我的rollup配置如下所示。
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import scss from &#
浏览 3提问于2020-02-25得票数 3
在我的react本机项目中，我使用了 v1，在文档中它说要添加"include": ["node_modules/react-native-redash/lib/typescript/v1/index.d.ts"]来使类型工作，而添加它确实解决了库类型的问题，但是增加了另一个问题。
当我添加那个include时，类型记录只会查看include中的文件，而忽略所有其他文件。
我检查了“包括”的描述：
指定与要包含在编译中的文件相匹配的glob模式列表。如果tsconfig.json中没有“文件”或“包含”属性，编译器默认包含包含目录和子目录中的所有文件，但“排除
浏览 9提问于2022-01-17得票数 2
我正在学习Typescript，并且正在将React应用程序中的现有文件从js更改为tsx。 对于下面的代码，我传入了一个posts数组。 我已将文件扩展名更改为.tsx，然后将签名从 export default function PostList ({ posts = [] }) { 至 export default function PostList ({ posts = [] }: { posts: array}) { 但我得到了 TypeScript error: Cannot find name 'array'. TS2304 代码的其余部分： import R
浏览 250提问于2020-07-07得票数 1
回答已采纳
我试图获得react-hooks规则，但它似乎不适用于我的设置(VSCode，CRA，airbnb，tslint，更漂亮)。
这是我的.eslintrc.json在崩溃前的情况：
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"g
浏览 0提问于2020-04-29得票数 0
回答已采纳
我正在创建一个内部NPM包，其中包含了所有ReactJS web应用程序的基本布局。在这个包中，我使用样式组件来格式化组件，并使用汇总来构建包。在目标应用程序中也使用样式组件。
下面是配置文件：
packages.json
{
....
"dependencies": {
"@azure/msal-browser": "^2.7.0",
"@microsoft/microsoft-graph-client": "^2.1.1",
"@microsoft/mic
浏览 3提问于2020-11-27得票数 0
回答已采纳
我想将我现有的react本地应用程序转换为typescript。
文档中说，要卸载现有的依赖项，并将它们替换为如下所示：
yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer
我需要对每一个依赖者这样做吗？如果某些依赖项没有@types/怎么办？
这是我的package.json：
{
"name": "reactnative",
"version": "0.0.1",
"private
浏览 0提问于2018-08-11得票数 0
回答已采纳
在使用react-blueprintjs时，无法确定如何设置accept属性。作为参考，在HTML中，这只是 <input type='file' accept='.txt,.csv,...' /> 我尝试使用inputProps={accept: '...'}，但结果是“找不到名称...”错误。 如果这是一个n00b问题，很抱歉，这对我来说正处于React/blueprint/HTML/typescript盲点。
浏览 12提问于2019-02-12得票数 1
回答已采纳
我有一个React组件，它接受作为支持inputRef的工具。
My Interface
interface Props extends WithStyles<typeof styles> {
body: text
inputRef?: any // I am not sure which TypeScript type I should use
}
我的组件
const MyComponent = ({
classes,
body,
inputRef
}: Props) => {
<TextField
body={body}
i
浏览 3提问于2020-07-10得票数 0
下面的代码触发了一个标准的default-case lint错误，但是没有触发@typescript-eslint/switch-exhaustiveness-check。知道是什么导致的吗？其他@类型记录
type Day = 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday';
const day = 'Monday' as Day;
let res
浏览 16提问于2022-05-02得票数 1
我想在我的.eslintrc.json文件中启用对“默认”typescript命名约定的警告。您如何做到这一点？
//package.json
//...
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"easy-peasy": "^5.0.3",
"eslint-plugin-react": "^7.23.2
浏览 30提问于2021-05-28得票数 0
回答已采纳
1回答
我已经使用React很长一段时间了，现在我想切换到使用。然而，我已经习惯了JSS风格(通过react-jss包)，我不明白我应该如何在TypeScript中使用它们。我还使用classnames包，有条件地分配多个类名，并获得相应的TypeSCript错误。
以下是我的React组件模板：
import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';
const styles =
浏览 3提问于2020-01-06得票数 5
回答已采纳
我对TypeSccript非常陌生。我正在尝试将我的React Native转换为使用TypeScript。我按照这里的说明操作：https://reactnative.dev/docs/typescript 在运行yarn tsc之后，我得到如下错误： node_modules/@react-navigation/stack/lib/typescript/src/types.d.ts:99:67 - error TS2339: Property 'style' does not exist on type 'PropsWithChildren<Animated
浏览 10提问于2020-08-03得票数 0
回答已采纳
1回答
我有一个自定义的React，它监视特定元素外部的单击。它工作得很好，但是我在一些地方很难让TypeScript开心。
App.js
import { useRef, useCallback } from "react";
import useClick from "./useClick";
export default function App() {
const asideRef = useRef(null);
const handleStuff = useCallback(() => {
console.log("a cli
浏览 3提问于2021-10-24得票数 0
回答已采纳
1回答
我在文档中没有看到任何关于SS的东西，我知道P=props，S=state但是SS
编辑
对不起，我是从一个React+TypeScript项目(即@types/react )引用的。我添加了typescript标签。
浏览 0提问于2019-07-16得票数 13
回答已采纳
我开始用TypeScript学习“反应三纤维”，但是当我开始我的旅程时，我被这个问题困住了。我在网上搜索了很多，但没有找到答案。
import React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
const AnimatedBox() {
const meshRef = useRef();
useFrame(()=>{
console.log("hi");
if(meshRef.cur
浏览 18提问于2022-11-04得票数 0
回答已采纳
我创建了一个TypeScript React应用程序，它使用：
yarn create react-app my-app --template typescript
这样，我的项目是用编译的，然后由捆绑。现在我想使用TypeScript ，默认情况下它在Babel中不受支持，但是它们是。我安装了所有必需的软件包：
在package.json中，我将react-scripts start改为react-app-rewired start。
最后，我创建了一个config-overrides.js文件：
const {
override,
addExter
浏览 4提问于2020-04-16得票数 3
回答已采纳
我正在尝试将我的TypeScript /create应用程序从MobX 5迁移到MobX 6。在官方迁移指南( )中，他们建议如下：
删除所有装饰器并调用构造函数中的makeObservable，并显式定义使用哪个装饰器应该可以观察到哪个字段。
但他们并没有说如何使用TypeScript应用程序来实现这一目标。给出的例子总是直接使用普通的JavaScript和React.RenderDOM。
下面是一个简化示例的开头--我需要迁移的一个典型类：
@observer
export default class LoginPage extends React.Component<ILogi
浏览 2提问于2021-02-19得票数 4
回答已采纳
在我的模块的顶部，我有 declare module 'react' {
namespace JSX {
interface IntrinsicElements {
webview: Electron.WebviewTag
}
}
} 然后在我的render方法中，我有 render() {
const {classes: c} = this.props
return (
<webview
className={c.webview}
ref={this.webviewR
浏览 56提问于2019-05-18得票数 1
在创建react应用程序时，我忘了使用redux-typescript模板。也就是说，我用命令创建了一个react应用程序：
npx create-react-app my-app --template typescript
而不是
npx create-react-app my-app --template redux-typescript
现在我已经构建了大量的UI，并添加了redux层。但是现在我意识到我应该用redux-typescript模板创建应用程序。我现在该怎么做？安装@reduxjs/toolkit和redux会有类似的效果吗？也就是说，运行在下面的命令现在会产生使用redu
浏览 2提问于2022-04-02得票数 0
1回答
我正在使用创建-反应-应用程序，并已配置我的项目为埃林特。下面是我的.eslintrc文件。
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"react-hooks"
],
"extends": [
"plugin:prettier/recommended",
"airbnb-
浏览 4提问于2021-06-15得票数 8
回答已采纳
我正在做两种不同的回复，lib和apps。
lib有一些用制作的反应组件，我想在apps中使用，这是用汇总构建的。
apps是一个Lerna，带有一个Next.js应用程序，它将lib作为依赖项导入以使用其组件，该组件可以用自定义主题在中自定义包装。
但是，这不起作用，因为存在MUI / ThemeProvider的重复实例，我可以通过将其添加到lib的入口点来验证这一点：
if (process.browser) {
(window as any)._React = React;
(window as any)._ThemeProvider = ThemePr
浏览 11提问于2022-01-14得票数 3
1回答
我有一个git存储库，我应该使用命令react-scripts start启动它。当我运行这个命令时，我得到了这样的响应:无法找到typescript： react-scripts start
It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running npm install typescript.
If you are not trying to use TypeScript, please remov
浏览 143提问于2021-09-03得票数 0
回答已采纳
2回答
当我在主页上添加一个旋转木马时，我遇到了一个问题。我得到了错误：
“‘JSX”没有定义。
我一直在关注Stack溢出，GitHub和谷歌，他们都给出了一个相对接近的答案，但我不知道我可能做错了什么。
我的carousel.tsx文件如下
import * as React from "react";
import styled from "styled-components";
const SCarouselWrapper = styled.div`
display: flex;
`;
interface IProps {
children:
浏览 18提问于2022-02-27得票数 1
回答已采纳
我正在尝试使用带有eslint和TypeScript的更漂亮的。当我运行npm run prettier -- --list-different时，我所有的css文件都收到错误SyntaxError: Unexpected token, expected ";"。我认为这是我的解析设置方式的问题，但似乎无法让它工作。这是我当前的设置。 .eslintrc {
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion"
浏览 53提问于2019-04-10得票数 3
回答已采纳
我正在尝试在Visual Studio2019中配置ESLint，我在选项中启用了ESLint，并且我已经在我的项目中的node_modules中安装了ESLint 7.4.0，这应该会导致Visual Studio根据使用该版本。但这会导致一个不太有用的错误。
当在命令行中从.eslintrc.yml文件所在的目录运行eslint .时，它会正常工作，并且会报告有关我的代码的错误和警告。
在Visual Studio中查看.js、.ts或.tsx文件时，它会在文件的第一个字符处报告以下错误internal-error: (ESLint) Unexpected token {。不报告任何其他错
浏览 0提问于2020-08-20得票数 1
2回答
这是我第一次创建类型记录react模块，我正在尝试导入我的项目中的类型定义之一，即使用新的npm模块。VSCode intellisense能够找到并建议自动生成的.d.ts文件之一，但是应用程序无法加载它。怎么一回事？
./src/components/MyPage.tsx
Module not found: Can't resolve '@myorg/component-library/build/Input/Input.types' in '/Users/jbaczuk/path/to/project/src/components'
如果我将导入路
浏览 1提问于2021-04-02得票数 1
回答已采纳
在React中，我想做一些类似于Angular的环境文件的事情。这是根据我的环境调整我的api端点和其他值：(注意，使用typescript)
**package.json:**
**angular**:
"start": "ng serve --configuration=dif",
**react:**
"start": "SET REACT_APP_CONFIG=dif & react-scripts start",
"pl2": "SET REACT_APP_CONFIG=pl2 &a
浏览 2提问于2020-01-11得票数 0
1回答
我正在用TypeScript + Firebase创建一个应用程序。我跟踪了这个网站来设置它：https://rnfirebase.io。在完成身份验证之后，我希望从实时数据库中获得一个值。但是，提出请求并不能解决问题。我也把它放在等待版本中，但是这也没有解决。
import React, { useEffect } from "react";
import { Text } from "react-native";
import { firebase } from "@react-native-firebase/database";
impor
浏览 2提问于2022-07-12得票数 0
我有以下使用Typescript的import语句： import * as React from 'react';
import { MouseEvent } from 'react' Typescript抱怨我应该组合这些多个导入。我尝试了以下方法，但导入的MouseEvent是不同的： import MouseEvent, * as React from 'react' 在这个组合导入语句中，MouseEvent与通过import { MouseEvent } from 'react'导入的不同。 出于某种原因，Types
浏览 46提问于2019-03-19得票数 0
回答已采纳
我正在使用react-bootstrap-typeahead，添加了来自@types/react-bootstrap-typeahead的类型 在我的来自react functional component的typeahead中，我尝试访问typeahead引用并调用组件的公共方法，就像给定的here一样 从‘react-bootstrap- Typeahead’导入{typeahead}； const typeahead = React.createRef();
<Typeahead
ref={(ref) => typeahead = ref}
id="basic-t
浏览 14提问于2020-10-28得票数 0
我希望对我的PascalCase项目中JSX.Element类型的变量强制使用React+Typescript。我经常使用以下模式来创建功能组件，并且我喜欢通过给它一个PascalCase名称来区分我的同名导出：
//MyComponent.tsx
//PascalCase for MyComponent
export const MyComponent= (): JSX.Element =>{
return (
<div>
My Component
</div>
)
}
export default MyComponen
浏览 2提问于2021-06-02得票数 3
回答已采纳
我有一个在TypeScript中构建的非常基本的React和Nextjs项目。我目前正在从零开始构建这个项目，以便更好地理解Nextjs，我已经非常精通TypeScript并做出了反应。
我有一个简单的时钟组件，如下所示，并按照。
import { NextPage } from 'next';
import React, { useEffect } from 'react';
type Props = {
isoTime: string
}
const Clock: NextPage<Props> = ({ isoTime }: Pro
浏览 1提问于2022-02-24得票数 0
是否可以在类型记录文件中导入Svelte组件并让Rollup成功地编译它？
以下代码作为Javascript文件工作，但转换为类型记录时出错，因为TS编译器不知道如何处理.svelte文件：
import Component from './Component.svelte';
const foo = () => new Component({ target: document.body });
是否有rollup-plugin-svelte和@rollup/plugin-typescript的组合将对Svelte组件进行预处理，以便类型记录编译器可以包含Svelte代
浏览 5提问于2020-07-06得票数 14
回答已采纳
在将eslint升级到8之后，我在每个测试模块上得到了以下错误：
error Definition for rule 'jest/valid-describe' was not found jest/valid-describe
eslintrc.json的一部分：
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/errors",
浏览 9提问于2021-11-27得票数 8
回答已采纳
1回答
当我导入要在".spec.tsx"文件中测试的组件或页面时，它不会识别Babel。
有没有办法将我的".spec.tsx"配置为识别~“”作为我的根导入？
项目基础：
我的代码：
import React from 'react';
import { render } from '@testing-library/react';
import SignIn from '~/pages/SignIn';
describe('SignIn Page', () => {
it(&
浏览 3提问于2020-06-20得票数 0
回答已采纳
我有一个react typescript项目。我需要将源代码(而不是构建)转换为ES3或ES5 Js。因为我想将此代码用作另一个react应用程序中的组件。
你能建议使用哪些预设和插件来完成这项工作吗？
我已经尝试了以下巴别塔预设和插件的组合
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
"@babel/preset-flow"
],
"plugins": [
浏览 1提问于2021-05-07得票数 0
我想向我的React项目中添加一些复杂的表。我做了一些研究，发现react-table是最好的选择之一。我安装了最新版本的v8.5.13，但是当我查看文档时，所有的示例都是用TypeScript实现的。我对TypeScript不是很熟悉，我的问题是:有没有可能实现没有TypeScript的react-table的最新版本？如果是，请提供一些例子。
浏览 11提问于2022-09-28得票数 1
回答已采纳
我使用npx create-react-app my-app --template typescript创建了一个react项目。我发现typescript-eslint在默认情况下已经启用了。
我检查了package.json内部的eslint配置
"eslintConfig": {
"extends": "react-app"
},
我认为要启用typescript-eslint，您需要package.json中的"extends": ["plugin:@typescript-eslint/recom
浏览 2提问于2020-08-08得票数 1
回答已采纳
我看过许多文档和示例，但我似乎仍然不太理解如何在React Native中使用带有TypeScript的功能组件的forwardRef。下面是一个示例，其中我创建了一个带有自定义函数的MyCustomComponent，我尝试通过创建ref从父级调用该函数。但是，由于ref的定义不正确且为null，我显然收到了一条错误消息，告诉我该函数不存在。请帮助我理解如何在React Native中正确使用forwardRef。提前感谢！
interface MyCustomComponentProps {
title: string
}
const MyCustomComponent: React
浏览 2提问于2020-10-23得票数 12
回答已采纳
3回答
我正在使用React 和Jest来测试我的React/Redux应用程序。
我想在多个测试中测试相同的组件，而不是在每个实例之间共享组件的状态。
就像这样..。
import React from "react";
import {renderWithRedux} from '../testUtils';
import App from "../components/App";
describe("App", () => {
test("does something as expected", a
浏览 0提问于2019-12-09得票数 2
2回答
在规则中发现冲突的最佳方法是什么？
我想要解决的问题如下。有些东西迫使这个三元表达式出现在新的行上。我怀疑这与行长有关，但我尝试过将max-len设置为没有任何更改：
setAdjustmentValue((props.adjustmenttype === AdjustmentTypes.Restock) ? props.selectedsiteunitstock.maximumCapacity - props.selectedsiteunitstock.currentStockLevel : null);
衬里的：
setAdjustmentValue(
props.
浏览 2提问于2020-12-06得票数 0
回答已采纳
我跟踪了，但这不起作用。下面是我的提交：
错误
$ meteor
[[[[[ ~/Private/ReactMeteorExample ]]]]]
=> Started proxy.
client/index.tsx (2, 24): Cannot find module 'meteor/meteor'.
=> Started MongoDB.
=> Started your app.
已安装
$ meteor add barbatus:typescript
$ meteor npm install --save @types/meteor @types/re
浏览 13提问于2017-08-02得票数 0
回答已采纳
我正在React应用程序中将普通的js文件转换为typescript。
但是，当我使用document.getElementById("login-username")等方法时，document显示了一个错误
如何在此typescript文档中引用document方法？
import React, { useState, FormEvent, ChangeEvent } from 'react';
interface loginProps {
username: string,
setUsername(username: string): string
浏览 0提问于2020-07-09得票数 1
我正在尝试为typescript中的React编写一个更高阶的函数：(1)需要被包装的组件的某些属性(2)允许在包装器上设置包装的组件属性(3)具有特定于包装器的属性 我基本上可以正常工作，但是当我在封装组件的匿名类上设置默认属性时，我从typescript中得到了一个我无法解决的错误。 我得到的错误是： src/withContainer.tsx:33:3 - error TS2322: Type 'typeof (Anonymous class)' is not assignable to type 'ComponentClass<P & Conta
浏览 106提问于2019-02-07得票数 3
回答已采纳
我正在尝试使用在一个转录/反应应用程序。下面的代码将显示一个按钮：
@module("@material-ui/core/Button") external button: string = "default"
@react.component
let make = () => {
<button > {React.string("Hello")} </button>
}
显示的按钮是基本的，我不能更改基本属性，如variant="contained"或color="primary
浏览 14提问于2021-06-21得票数 2
回答已采纳
我正在尝试显示react项目中的图像，该项目是使用typescript模板创建的。 代码运行，页面只显示图像图标，而不显示图像本身。我做错了什么？ 我使用: create-react app --template typescript。如果我把它放在公共目录中，我就不能访问它。因此，该文件夹被放在src目录中。 下面是该组件的外观： import React from 'react';
import styled from 'styled-components';
const logo = require('../../src/images/logo
浏览 25提问于2021-06-28得票数 0
回答已采纳
在取自fountain webapp typescript MVC示例()的App.tsx中，导入包含以下行：
import {IDispatch} from '~react-redux~redux';
Visual Studio 2017在这一行下划线(“找不到模块”)，但它在浏览器中工作。我以前从未见过这种语法，不知道它试图做什么？
这里有一个开放的罚单提到了它：
浏览 1提问于2017-03-30得票数 31
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
