如何在React中导入带有@的包？
在React中导入带有@的包，可以按照以下步骤进行：
- 确保已经安装了npm或者yarn作为包管理工具。
- 打开终端或者命令行界面，切换到项目的根目录。
- 运行以下命令安装所需的包：
- 运行以下命令安装所需的包：
- 或者
- 或者
- 其中，[package-name]是你要导入的带有@的包的名称。
- 在需要使用该包的组件文件中，通过import语句导入包：
- 在需要使用该包的组件文件中，通过import语句导入包：
- 其中，@package-name是你要导入的带有@的包的名称。
需要注意的是，导入带有@的包的方式可能会因具体的包而有所不同。有些包使用的是默认导入方式，即直接导入整个包。有些包则可能通过具体的模块路径进行导入，例如：
import { Component } from '@package-name/module-name';关于React中导入带有@的包的具体用法和配置方式，建议参考相关包的官方文档或者社区文档，以确保正确导入和使用该包。
相关·内容
1回答
我有一个简短的问题：
在React中，我们为每个组件导入React组件：
import React from 'react'
这是否意味着，如果我的屏幕使用多个子组件(每次也导入React )，是否多次导入React包？
所以基本上：
带有4个子组件的屏幕=5x React包加载=所使用的react内存的5倍
或
一个带有4个subcomponents= 1x React包的屏幕
还是只导入一次react包，然后在需要时再次访问它？
浏览 2提问于2020-07-23得票数 3
回答已采纳
2回答
我已经看到了用于动态导入的webpack (参见下图)，但这在react中似乎不起作用，因为我们在React中直接返回组件，而不是在DOM中添加元素(之后是承诺的元素())。
在中，它们展示了如何只加载其他响应组件，而不是如何动态导入NPM库。
所以如果有人能解释如何动态导入npm模块，那就太好了。
浏览 15提问于2022-05-06得票数 0
回答已采纳
1回答
我完全确定，我问的是一个愚蠢的问题，但我真的不明白这一行代码是如何工作的
import React from 'react';
我的问题是:谁在哪里搜索'react'名称？
例如，告诉我，对于module-name，我应该使用绝对路径的相对值，例如
import React from './react';
或
import React from '/home/user/react';
我认为'react'和'./react'是一样的，但是我已经通过create-react-app命令创建了React
浏览 1提问于2020-06-24得票数 2
回答已采纳
在用于库的文档中，通常会在文档中提供有关模块通过npm安装后如何导入的信息。例如：
import React from "react"
如果没有给出它，那么如何知道应该导入什么来使用库呢？
浏览 10提问于2022-01-23得票数 1
回答已采纳
当我试图用react-native-webview@9.0.1生成QR代码时，我在npm react-native-qrcode-generator中得到了这个错误
我使用的是react本机带有世博管理的工作流。问题是它可以在iOS上运行，而我只能在Android上得到错误。
我自己寻找了一个解决方案，我试着安装了react-native-get-random-values，但这也不起作用。
有什么想法吗？
浏览 9提问于2020-04-12得票数 15
回答已采纳
我正在尝试将react原生的、react导航-抽屉和类型-结合起来，并出现以下错误：
TypeError: null不是一个对象(计算'_ReanimatedModule.default.configureProps')
在四处搜索时，我觉得问题可能是没有指定默认路径。说应该有一个initialRoute：
有几个选项传递给底层路由器以修改导航逻辑：
initialRouteName -最初路线的routeName。
但是不包括这样的字段。这只是打字本绑定的问题吗？
"dependencies": {
"@types/jest
浏览 7提问于2019-09-25得票数 0
1回答
我在带有打字本的中使用，我想使用的情感支柱。
遵循它们的，我想在组件外部的const中定义样式，如下所示：
import { css } from "@emotion/react";
const myStyle = css({
backgroundColor: "red",
display: "inline-block",
height: 24,
width: 24
});
export default function App() {
return <div css={myStyle}></div>
浏览 32提问于2022-07-26得票数 0
为我的应用程序安装和配置react-native-firebase包后，运行react-native run-android不再创建index.android.bundle文件。我已经能够通过运行以下命令来解决此问题：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && re
浏览 15提问于2019-08-08得票数 3
我正在尝试实现一个项目，比如： https://codepen.io/andytran/pen/GpyKLM 正如您所看到的，页面需要javascript才能正常工作。我正在尝试构建一个Next/React组件来实现以下代码： import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
class Auth extends
浏览 25提问于2021-03-28得票数 0
回答已采纳
1回答
因此，我试图在React应用程序中使用。
我下载了并将其添加到解决方案()中。
(我使用初学者工具包)
在容器中，我添加了以下内容：
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {fetchForecast} from 'redux/modules/weatherForecast';
@connect(
state => ({forecast: state.weatherForeca
浏览 4提问于2016-03-23得票数 0
回答已采纳
我正在尝试为DropdownIndicator创建自定义组件，并在带有Typescript的react-select上使用，但我对组件的类型有一些问题，因为我不熟悉typescript。
如何在组件上使用@ types /react-select上定义的类型？
我已经安装了@types/react-select，并且已经有了一个，但是我没有找到引用它的方法。
这是我的index.tsx
import React from 'react';
import Select from 'react-select';
import DropdownIndicator f
浏览 0提问于2019-08-18得票数 6
比方说，我们在ES6中使用React。我们将React和Component作为
import React from 'react'
import { Component } from 'react'
为什么会有语法差异？我们不能像下面指定的那样使用吗？
import Component from 'react'
浏览 51提问于2017-01-21得票数 70
回答已采纳
我使用npm在/node_modules/bootstrap下下载了bootstrap依赖项。
我在index.html中添加了CDN链接。
我不能使用某些特定的标签，我不确定这些标签是否包含在bootstrap中。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BV
浏览 6提问于2018-03-05得票数 2
我有以下使用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
回答已采纳
我想将添加到带有ts的nextjs中，但是我得到了下一个错误：
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
import React, { useState } from 'react';
import Calenda
浏览 3提问于2022-08-25得票数 0
回答已采纳
这是我的代码。Webpack可以加载PDF了。react组件不呈现pdf。当通过react组件访问时，它会显示一个带有第1号页面的空白页面，当将以下url放入浏览器时，它会直接从浏览器呈现pdf，这样就可以了。
import React, {Component} from "react";
import myPdf from '../images/BSOAANZChapterConstitution.pdf'
import {Document, Page} from 'react-pdf/build/entry.webpack';
class
浏览 1提问于2017-10-21得票数 0
1回答
我有以下基本测试：
/*eslint-disable */
import LocationChooserStore from './../LocationChooserStore';
describe('AccountStore', () => {
it('should do', function(){
expect(1).toBe(1);
})
})
seupTests.js
/* eslint-disable */
// =========== ENZYME CONFIG FOR REACT 16 =
浏览 0提问于2018-08-22得票数 0
下面是用于带有类型记录的nextjs项目的_app.js中使用的代码
import React from 'react'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
错误说
4:18错误:道具验证react/支柱类型4:29中缺少“组件”：道具验证react/支柱类型中缺少“pageProps”。
我怎么才能解决这个问题？
浏览 7提问于2022-07-22得票数 0
回答已采纳
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中从node_module导入所有函数(我假设同样的逻辑也适用于其他框架，如angular，是的，我知道react不是一个框架，它是一个库)和只导入你要使用的函数(在这两种情况下，我们都只使用我们想使用的函数)有区别吗？ 例如，我们可以导入所有内容并执行以下操作 import * as FaIcons from "react-icons/fa";
<FaIcons.FaEnvelopeOpen /> 或者只导入我们需要的函数，如下所示 import { FaEnvelopeOpen } fr
浏览 11提问于2021-08-30得票数 2
回答已采纳
我很新的反应，这是我的第一个应用。
到目前为止，我已经有了一个带有两个屏幕的堆栈导航器: MainMenu和Profile。当用户在MainMenu中时，右上角会显示一个按钮，当按下该按钮时，我需要将用户重定向到配置文件屏幕。我需要类似this.props.navigation.navigate('Profile')的东西，但这不起作用，因为没有定义this、props和navigation。
我的想法是我不能从这个堆栈导航栏重定向到概要文件，因为概要文件还没有定义，但是我不知道其他方法。
// mainStack.js
import React from '
浏览 1提问于2021-02-15得票数 0
回答已采纳
这很奇怪。在我试图拆分代码时，我遇到了这样的情况：
const g = "bi";
const importStr = `react-icons/${g.toLowerCase()}`;
console.log(importStr);
console.log(importStr === `react-icons/bi`);
import(importStr).then(module => {
console.log(module);
});
import(`react-icons/bi`).then(module => {
console.l
浏览 1提问于2021-08-20得票数 1
回答已采纳
3回答
我想在生产中使用来自CDN的react.min.js (例如)
让Webpack将我的import React from 'react'语句转换为const React = window.React而不是将node_modules/react构建到包中的最佳方法是什么？
我一直在用resolve.alias做这样的事情：
在index.html中
<head>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.min.js
浏览 9提问于2015-07-22得票数 55
回答已采纳
我收到以下错误:错误:找不到模块'./img/grpd/IMG_2812.JPG‘
我基本上是在遍历源文件中的图像目录并显示图像。
我注意到如果我修改了下面这行
var filePath = './img/grpd/IMG_' + i + '.JPG';
至
var filePath = './img/grpd/IMG_2803.JPG';
页面呈现得很好。
import React from 'react';
import ReactDOM from 'react-dom';
import '
浏览 0提问于2020-03-01得票数 0
1回答
因此，我希望使用React Context Api在两个子组件之间传递数据，但它显示以下错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但got: undefined。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查App的render方法。以下是我的代码 App.js import React,{ MyProvider} from 'react'
import {BrowserRouter as Router, Switch,Route} from 'react-router-dom'
im
浏览 26提问于2021-07-11得票数 0
1回答
我检查过这里和这里，但这对我有帮助。我使用的反应路由器版本4，当我试图运行控制台时，也没有显示任何东西或我的页面。请帮帮我，我在这里放了一个控制台，它也没有打印任何东西，这意味着我的headerContainer，它自己，没有被渲染，这里是我的index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/co
浏览 3提问于2017-07-31得票数 0
回答已采纳
我刚刚开始使用webpack，我使用的是带有动态页面加载程序的react路由器，并且想动态导入我的文件，但是在webpack中得到这个警告：
警告在./app/pages/ request es.js 35:6-44关键依赖项:依赖项的请求是一个表达式
下面是我的代码示例：
const routes = {
component: App,
childRoutes: [
{
path: '/',
getComponent (location, cb) {
System.import('./Home'
浏览 2提问于2017-03-16得票数 0
首先，我是一个新手，在世界上的打字和反应，所以请容忍我。
我遇到的问题是，每当我使用react-router-dom包中呈现为“react-router-dom”或"Link“的按钮导航时，结果只是URL更改，没有任何东西被呈现出来。
如果我按下地址栏上的enter (强制运行给定的URL)，组件呈现，否则我只能看到我的应用程序背景。
我在SO和其他站点上可以找到的所有其他问题的不同之处在于，我使用的不是高级BrowserRouter，而是Router，这样我就可以使用createBrowserHistory()并将其传递给路由器，并在需要时从MobX使用它。
最奇怪的是--我在另一个
浏览 2提问于2020-09-29得票数 0
回答已采纳
1回答
我正在开发一个使用axios的react组件库：
为了开发，我在peerDependencies.中将axios放在devDependencies中。
In rollup.config.ts，我将axios放在“外部”道具中，这样就不会用我的代码构建它了。
出口违约[{
输入："src/index.ts"，输出：{ file: packageJson.main，format："cjs"，sourcemap: true，}，{ packageJson.module，packageJson.module，format："esm"，sourcemap:
浏览 3提问于2022-08-01得票数 3
我正在尝试使用phaser和ion-phaser/react在Next.js应用程序中构建一个带有游戏的页面。这是我的pages/game.js (使用中的React示例)：
import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'
class App extends Component {
state = {
initialize: false,
gam
浏览 8提问于2021-07-02得票数 1
我是反应和打字的初学者。我在typescript中使用react组件时遇到了问题，例如https://www.npmjs.com/package/react-toggle-button。 我用Visual Studio生成了类型。 Btw import ToggleButton from 'react-toggle-button';错误:/ClientApp/types/react-toggle button“‘没有默认导出。 因此，我以这样的方式导入： import * as ToggleButton from 'react-toggle-button';
浏览 34提问于2019-02-04得票数 2
我想将我现有的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应用程序，我使用的是库@react-google-maps/api和react-places-autocomplete。
我怎样才能得到国家、州、城市的长坐标？
如何获得格式化的地址，地点，给付和长？
浏览 5提问于2022-09-27得票数 -1
有些教程使用--保存模式，而有些使用--保存--开发模式。
他们都使用Babel，说这是用来将React转换成浏览器理解的普通Javascript。这意味着最后的包将有Javascript。在这种情况下，为什么我们需要在-保存模式中安装？--保存-dev模式应该足够了，对吗？
另外，像import这样的语句是从“React”开始的，它们会进入prod构建包文件吗？如果没有，那么在相应的作用域/内存空间中，像React.createClass这样的语句是如何工作的而没有反应的呢？
浏览 1提问于2018-05-25得票数 6
我尝试了很多方法让它发挥作用，但现在我要呆在同一个地方。
我怎么能绕过这个？为什么这个不能正常工作？
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import axios from "axios";
import Stories from "./layouts/Stories";
import Loader from "./layouts/Loader";
浏览 5提问于2022-06-30得票数 0
1回答
问题：
我有一个组件，应该重定向用户到一个新的页面点击。我想使用Next的<Link>组件来处理路由更改。
但是，我注意到，如果Link组件的任何子元素不是标准HTML元素(例如，<div>、<a>、.)，则拒绝呈现。
在下面的示例中，我要呈现的组件是heroicons库中的一个图标。
MyPage.js
import Link from 'next/link'
import { ArrowSmRightIcon } from 'heroicons-react'
export default function MyPage(
浏览 5提问于2022-10-06得票数 0
回答已采纳
成功地拔出了一个带有问题的代码框，请有一个。
在使用react时，一切都很好--阿波罗2.5，现在我们已经开始了迁移到3.0的过程。
package.json相关部分的快照
"@apollo/client": "^3.0.0-beta.19",
"@apollo/react-components": "^3.1.3",
"@apollo/react-hoc": "^3.1.3",
现在我得到了下面的错误
Could not find "client" i
浏览 2提问于2020-01-08得票数 1
我正在用eCommerce开发一个React.js站点，并且在Chrome中有"TypeError:无法读取未定义的属性‘项’。这里也是错误的屏幕截图和VS代码，与代码本身一样，错误正在发生。请帮帮我！我会非常感激的！)
在这里您可以看到代码和错误
import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap
浏览 1提问于2021-01-06得票数 0
回答已采纳
1回答
本机反应:无法导入和使用外部包
、、、、
我试图使用的反应-本机-选项卡-导航包。我在我的项目目录中做了npm install react-native-tabbar-navigator --save来安装这个包。在我的代码中，我有以下导入行来使用包。
import React, { Component } from 'react';
import {TabBarNavigator} from 'react-native-tabbar-navigator'
import MainTab from './MainTab';
import {
AppRegistry,
Style
浏览 3提问于2016-07-24得票数 2
回答已采纳
我对react和它生成javascript的方式都很陌生。
在react端，我有一个使用数据对象UserData的Utility类，组织如下：
UserDataObj.js
class UserData{
this.someobj = {};
//some function here
something(){
}
}
const UserDataObj = new UserData();
export {UserDataObj};
Utility.js
import {UserDataObj} from './data/UserDataObj';
class
浏览 10提问于2020-05-15得票数 2
回答已采纳
1回答
我所拥有的是一个带有react的应用程序，在那里我刚刚下载了一个纯粹的css。我试图实现一个按钮，该按钮将显示下拉列表，如下所示：
https://materializecss.com/dropdown.html
当然，我没有也不想要查询。因此，关于如何触发下拉列表的信息是不可用的。谷歌我意识到，你应该“导入”M从物化-css。就像这样：
import M from 'materialize-css';
useEffect(){
let elems = document.querySelectorAll('.dropdown-trigger');
浏览 2提问于2021-01-21得票数 1
回答已采纳
1回答
我在我的项目中使用react，我需要在我的应用程序的某些页面中使用引导程序，所以我将<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />放在index.html的公用文件夹中，但是在所有页面中应用引导程序的..fontFamily已经在页面中被更改了。
我想将它应用到一个特定的react js文件中。
如何在react文件中导入<link rel="stylesheet" hre
浏览 0提问于2018-08-31得票数 0
回答已采纳
2回答
我不熟悉语义/反应/表达。如何在React中包含语义样式表？我需要一个直接链接到语义css/JavaScript文件的html文件吗？现在，我没有使用任何html文件。
我的主页，dashboard.jsx
var React = require('react');
var Layout = require('./layout');
class Dashboard extends React.Component {
render() {
return (
<Layout title={this.props.title}>
浏览 5提问于2016-09-13得票数 0
回答已采纳
我遵循设置android的需求，并启动了一个带有react本机的项目。当我试图使用命令react-native run-android运行应用程序时，它会一直显示此错误，然后退出该进程。
/path/to/native/android/app/src/main/java/com/native/MainActivity.java:1: error: <identifier> expected
package com.native;
^
浏览 0提问于2015-09-19得票数 31
在我的反应代码中，我试图将createClass转换为ES6类，我在这里挣扎着：
componentDidMount()
{
$(ReactDOM.findDOMNode(this)).draggable();
}
(过去是:转换前的$(this.getDOMNode()).draggable();，并且工作得很好)
我得到的错误是：
__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.findDOMNode(...).draggable不是一个函数
我知道draggable()是jQuery UI中的一个函数，所以我尝试在我的
浏览 0提问于2018-04-29得票数 1
回答已采纳
我想创建一个简单的应用程序与反应原生在android上。我在create Toolbar:中使用了这个源代码，但是我得到了这个错误：
undefined is not an function (evaluating React.createClass)
我该如何解决这个问题呢？
浏览 0提问于2016-05-30得票数 0
2回答
import Icon from 'react-native-vector-icons/Feather';
import Icon from 'react-native-vector-icons/Ionicons';
我想在同一个组件中使用来自“react本机-矢量-图标/Feather”和“react本机-矢量-图标/Ionicons”的图标。
但是导入两个图标就会产生语法错误。
export default function App() {
return (
<SafeAreaView style={styles.container}>
浏览 19提问于2022-06-05得票数 1
回答已采纳
使用: react 16.8.6。在开发模式下工作。 1) Do: npm create-react-app my-app 2) cd my-app 3)新增:导入"react-app-polyfill/ie11"；作为index.js中新的第一行 4) do: npm start 5)在Windows10上的IE11中，它会在控制台中中止，并显示以下内容： SCRIPT1002:语法错误1.chunk.js (10735,34) SCRIPT1002:语法错误main.chunk.js (154,1) 我尝试过其他的polyfills： 导入react-app-polyfi
浏览 53提问于2019-06-04得票数 3
回答已采纳
我在学习反应反应。我对redux在功能组件中的使用感到有点挣扎。如何从功能组件调用操作。我看过一些使用react的教程。这对我来说很有意义。但是，这些教程调用操作类型，而不是创建操作类型的函数。
我的案子：
包装容器：是从管理所有数据的包装容器组件传入的，这些数据--蜜源支持--一直传递到LoadedNavbar函数：
<LoadedNavbar isAuthenticated = {isAuthenticated} profile = {profile} />
Functional ：一个带有按钮的导航栏。应该在functional component.How中调用注销操作，我是
浏览 3提问于2020-08-16得票数 10
回答已采纳
2回答
我刚开始使用React，我正在TaskList.js类型的arrayOf文件中实现arrayOf，但在编译应用程序时，我得到了一个错误，指示“未定义不是一个对象(计算'react3.default.PropTypes.arrayOf ')”，即使我添加了另一个字符串类型的PropTypes或另一个PropTypes，也会发生同样的事情。
如何使用PropTypes解决这个问题？
误差
package.json
{
"name": "test",
"version": "0.1.0",
"
浏览 0提问于2018-03-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
