如何从React上下文中只导入我需要的函数
从React上下文中只导入需要的函数可以通过以下步骤实现：
- 首先，确保你的项目中已经安装了React，并且已经创建了一个React组件。
- 在组件的顶部，使用
import语句导入React和需要的函数。例如，如果你只需要导入useState函数，可以这样写：
import React, { useState } from 'react';- 接下来，在组件中就可以直接使用导入的函数了。例如，使用
useState函数创建一个状态变量：
const [count, setCount] = useState(0);在这个例子中，我们只导入了useState函数，而不是导入整个React库。
- 继续编写你的组件代码，使用导入的函数完成你的需求。
需要注意的是，React的上下文（Context）是一种在组件树中共享数据的方法，它并不是用来导入函数的。如果你需要在组件之间共享数据，可以考虑使用React的上下文功能。
推荐的腾讯云相关产品：腾讯云函数（云原生 Serverless 产品），它提供了无服务器的计算能力，可以帮助你在云端运行你的函数代码。你可以在腾讯云函数的官方文档中了解更多信息：腾讯云函数产品介绍
相关·内容
2回答
我试图在React路由器上使用context API，但它并不像我所期望的那样工作。
这是我的Container.js文件
import React from "react"
import {Route, Switch} from "react-router-dom";
import Home from "../Components/Home/home";
import Create from "../Components/Create/create";
import Login from "../Component
浏览 5提问于2021-01-31得票数 0
回答已采纳
1回答
我正在学习如何使用带有React本机的上下文，实际上，我正在跟踪一个博客，其中定义了如何在任何带有React和导航的应用程序中使用createContext和useContext进行身份验证逻辑。在博客中，没有定义如何导入类AuthService并在另一个组件中使用上下文，而且我有一个错误，因为当我试图将函数和状态导入到我的Navigator页面或登录页面时，这些函数和状态不存在。
守则：
AuthService.tsx
import React, {createContext, useState, useEffect} from 'react'
import AsyncSto
浏览 3提问于2021-04-24得票数 0
我试图将一个函数从App组件传递到另一个函数，但是它说函数没有定义(在子组件中)，非常肯定我做了一些错误的事情，比如以错误的方式调用函数，但是我无法理解它，因为大多数在线答案都是使用基于类的组件
App.js
function App() {
const API_URL = "https://course-api.com/react-tours-project";
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
async f
浏览 4提问于2022-11-12得票数 0
我试图从getDefaultProps中访问一个混合函数，但是我得到了undefined is not a function。基本上，我使用的是react-intl，我的列的默认标签应该被翻译。为什么我不能从getDefaultProps内部访问mixin中定义的函数？
var React = require('react');
var ReactIntl = require('react-intl');
var IntlMixin = ReactIntl.IntlMixin;
var Index = React.createClass({
mixins
浏览 4提问于2015-05-23得票数 1
回答已采纳
1回答
我正在尝试创建一个节点-webkit应用程序，我想使用react.js作为我的框架。在尝试了react并创建了一些组件之后，我尝试在节点-webkit应用程序中使用它，如下所示：
'use strict';
require('react');
每当我打开我的节点-webkit应用程序(它在正文的末尾包含上面的脚本)时，我就会得到错误：
ReferenceError: document is not defined
at Object.<anonymous> (C:\Users\rtol\Dropbox\Code\Node- Webkit\Wallp
浏览 2提问于2015-04-29得票数 1
回答已采纳
我有个课
public class MakeMeBean {
@Autowired private IAmBean var1;
private IAmNOTBean var2;
public MakeMeBean() {}
public MakeMeBean(IAmNOTBean var) {
this.var2 = var;
}
}
我想把这个类变成一个bean，所以我把一个wireup.xml作为
<bean id="make-me-bean" class="com.blah.blah.MakeMeBean">
浏览 0提问于2012-07-09得票数 0
1回答
我有以下背景：
import React from 'react';
import { createContext } from "react";
type UserModifcationContextType = {
onEdit?: (objectId: number) => void;
onDelete?: (objectId: number) => void;
};
export const UserModificationContext = createContext<UserModifcationContextType&
浏览 0提问于2020-02-28得票数 0
4回答
函数调用
、、
我试图在类中调用函数，但与下面的语法混淆。
为什么在调用函数时需要使用绑定方法？
为什么没有执行箭头函数？
import React, { Component } from 'react'
import { Text, View } from 'react-native'
//arrow function not getting executed!
myFun = data => {
console.warn(data);
}
myFun(data){
console.warn(data);
}
class Hello extends
浏览 9提问于2019-11-17得票数 1
我试图了解如何使用isServer / isClient --导入/ui/components/User/Login.jsx中有一个.jsx文件
在内部，我试图调用Meteor.isServer，Meteor.isClient，但这两个值都是未定义的。我对Meteor非常陌生，无法理解这种行为。
import Meteor from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
export class Login extends Re
浏览 4提问于2016-07-11得票数 0
回答已采纳
1回答
昨天我参加了React开发者职位的面试。面试官问我关于全局函数，以及如何使用React创建和调用全局函数？
我以为他说的是Redux和状态容器...
但他说，不..。它不是关于状态容器的，而是关于react服务的。
因为在面试之后我搜索了react服务，但是我没有找到任何东西。
您对此功能和全局功能有何看法？我应该在所有组件上导入全局函数，还是这里有不同的方法来处理这个问题？
谢谢
浏览 11提问于2019-04-29得票数 1
1回答
我正在尝试弄清楚如何将react状态设置为数据库的值。我正在使用。
var Duck = React.createClass({
getInitialState:function(){
return { century:'' }
},
fridge:function(){
var db = new Dexie('homie');
db.version(1).stores({
friends:'name, race'});
db.open().catch(function(){
alert("Open failed: ");
浏览 8提问于2016-07-29得票数 2
回答已采纳
我有一个addNotification() at App.js的方法，我想在其他组件中重用它。例如，这里我使用了AgencyProfile组件。如果我将addNotification()方法从App.js导出，则不起作用。如何从其他子组件调用方法addNotification()，例如AgencyProfile？这是我的App.js代码
export class App extends React.Component{
.....
addNotification(title, message, level, time) {
let dismiss = (ti
浏览 2提问于2019-09-20得票数 1
回答已采纳
1回答
带IIFE的逗号运算符
、、、
在react库中，在定义useSelector的文件中，我发现了与IIFE一起使用的逗号操作符的多个实例，其方式如下：
var _useReducer = (0, _react.useReducer)(function (s) {
return s + 1;
}, 0),
forceRender = _useReducer[1];
var subscription = (0, _react.useMemo)(function () {
return (0, _Subscription.createSubscription)(store,
浏览 3提问于2022-04-16得票数 1
回答已采纳
我正在处理一个React和Firebase项目，在我的代码(我正在使用VScode)上设置自动完成时遇到了问题。
到目前为止，我得到的是：
如何为我的应用程序组件(通过上下文)提供防火墙
FirebaseContext.js
import React from 'react';
const FirebaseContext = React.createContext(null);
export default FirebaseContext;
firebase.js
import firebase from 'firebase/app';
import &
浏览 0提问于2019-05-27得票数 0
回答已采纳
我正在尝试为react with cypress中的组件编写“单元测试”。
跟随链接
当我为一个组件编写测试用例并尝试使用"npx cypress open-ct“运行时
然后得到上面的错误(问题标题)...
注意:对于登录，实现了oAuth2！
我的index.spec.js文件是
import * as React from 'react';
import { mount } from '@cypress/react';
import User from './index';
describe('User component
浏览 2提问于2021-11-13得票数 0
2回答
在我的应用程序中，构造函数中有一个带有状态变量和一个组件变量的组件。但是，如果我尝试通过调整窗口大小从我的方法中访问它们，我将得到undefined和cannot read property 'test' of undefined。
import React from 'react';
class Testapp extends React.Component {
constructor(props) {
super(props);
this.state = {test: "he"};
浏览 1提问于2020-01-20得票数 1
回答已采纳
我已经为Overlay组件创建了一个context。该上下文对于Overlay的visibility是可响应的。
import React from "react"
const Context = React.createContext({
visibility: false
})
export { Context }
我的Overlay组件可见性取决于此context
import React, { useContext } from "react"
import { Context } from "./context"
cons
浏览 2提问于2020-09-06得票数 0
我试图设置react-native-navigation，但我遇到了问题
我的代码如下
app.js
import React from 'react';
import { Provider } from 'react-redux'
import { Navigation } from 'react-native-navigation';
import registerScreens from './screens'
import configureStore from './src/store/config
浏览 0提问于2017-11-19得票数 1
回答已采纳
我在一个UITableView项目中有一个iOS。当用户从表中选择项时，对象将从CoreData检索并存储在"Player“对象中。然后将这个player对象传递到另一个视图控制器中。
我的问题是:如果我更改了这个Player对象中的属性，那么如何保存这些更改。CoreData如何知道哪个播放器对象改变了？我没有设置playerID属性，因为所有的核心数据文档都说它管理自己的it和引用。
更多：
所以，现在我正在做这个(请原谅我的伪代码，我现在没有我的源代码)：
Player *player1 = [NSFetchResultController objectAtIndex:0]
Pl
浏览 2提问于2012-10-30得票数 0
回答已采纳
2回答
在下面的代码片段中，我不清楚这个是如何通过响应来管理的。
class Main extends React.Component {
private name: string
constructor(props: any) {
super(props)
this.name = 'heisenberg'
}
render() {
return (
<div>
{this.sayMyName()}
<
浏览 0提问于2018-09-25得票数 2
回答已采纳
1回答
我使用+上下文来管理状态。但是，我遇到了这个问题，即使我正在传递上下文对象(至少我认为是这样)，React.useContext()仍然返回未定义的内容。我错过了什么很明显的东西吗？发生什么事了呢？
我一直试图使用usecontext从本地主机服务器获取数据，但它显示的是未定义的数据。如果我在app.js中获取数据，数据将被正确地获取。
StateContext.js
import React, { createContext, useState, useEffect } from "react";
const StateContext = (props) => {
浏览 4提问于2022-10-09得票数 1
回答已采纳
我在App.js中创建了一个用户上下文，然后使用context.provider向子组件提供上下文值。我可以简单地使用来自"login.js“组件的上下文，但是当我尝试从另一个组件使用它时，它会提供”未定义“值。
这是我的App.js
import React, {createContext} from "react";
export const UserContext = createContext();
function App() {
const [loggedUser, setLoggedUser] = React.useState({});
const
浏览 0提问于2021-05-19得票数 2
回答已采纳
1回答
我有一个使用mapbox地图的应用程序，我正在尝试从另一个单独的卡组件中调整视口。我这样做的方式是创建一个viewport上下文，并将viewport和函数传递给map和card组件。
这是可行的，但我遇到了重新命名的问题。每当用户在地图上滚动时，视图端口就会不断变化，因此viewport提供程序中的所有内容都会不断地重新命名。代码的简化版本如下
应用程序
<ViewportProvider>
*Container that holds both the map and the sidebar that renders the card components*
</Vi
浏览 1提问于2022-01-02得票数 3
回答已采纳
我需要在我的应用程序的多个页面中查询graphql，我正在尝试创建一个react高阶函数来做到这一点。 这是原始的： const Profiles = () => {
// Omitted code
const { loading, error, data, refetch, fetchMore } = useQuery(
GET_PROFILES(),
{
variables: { id },
}
);
if (loading) {
return <Loading />;
}
if (error) {
浏览 7提问于2020-12-08得票数 0
回答已采纳
1回答
我正在跟踪来设置和播放JSX，，sans，React，，在一个附带的项目中。
我遇到的一件非常烦人的事情是:我找不到任何关于如何在全局上向整个项目公开JSX工厂函数的消息。而且(虽然不太重要)，我的JSX.IntrinsicElements结构也没有在全球范围内公开。
这是我的tsconfig：
{
"compileOnSave": true,
"compilerOptions": {
"target": "es6",
"lib": [
浏览 2提问于2018-06-11得票数 3
回答已采纳
2回答
我刚开始尝试mobx-使用商店反应，并想使用一个商店和一个单一的可观察，但甚至不能使这个工作。
使用@observer，我得到了错误Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'。
没有它，值就变成1。
我不知道这里出了什么问题，有什么想法吗？
import {observable} from 'mobx'
import {inject, observer} from 'mobx-rea
浏览 0提问于2018-01-17得票数 0
回答已采纳
DataContext.js export const DataContext = createContext()
const DataContext = ({ children }) => {
const [userValue, setUserValue] = useState()
const [user, setUser] = useState()
const fetch = useCallback(async () => {
const response = await axios(Url)
setBalance(re
浏览 17提问于2021-02-03得票数 0
2回答
在jest测试中，我需要导入一个声明一些全局函数的javascript模块。这个javascript模块是从django (例如jsi18n)自动生成的，它是一个自动调用函数
(function(globals) {
var django = globals.django || (globals.django = {});
...
}(this));
这对于在react组件中使用翻译很有帮助。例如，使用全局定义的函数gettext()在我们的.jsx文件中包含翻译字符串
<p>{ gettext('got it') }</p>
我已经尝试
浏览 0提问于2018-04-05得票数 2
1回答
我开始在一个不同的项目中使用故事书，我已经让SCSS @import在另一个回购中工作，但我不知道我的生活到底出了什么问题。
在./src/components/导航/style.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/react-scripts/node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/
浏览 0提问于2019-07-05得票数 4
嗨，我是个新手，所以请耐心等待。下面是我的代码。 import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, AsyncStorage} from 'react-native';
export default class App extends React.Component {
constructor(){
super();
this.state = {
myLeader: 'Joe&#
浏览 21提问于2017-11-26得票数 1
回答已采纳
我正在尝试创建一个背景主题，它将打开onClick。在onClick上，必须更改react应用程序中body的背景色。我已经成功地实现了useContext，现在它切换并更改了标头组件中的列表项颜色。如何将其设置为body？任何帮助都将不胜感激。
这是我的useContext颜色组件
import React from 'react'
export const themes = {
light: {
foreground: '#ffffff',
},
blue: {
foreground: 'blue',
},
浏览 2提问于2020-09-19得票数 0
回答已采纳
我正在尝试创建一个可重用的功能组件，它将根据我从父FeatureList组件传递给它的内容来呈现文本和图像。
当我试图从组件中动态地请求()图像时，它抛出了一个错误，但是当我在文件的顶部需要一个不变的图像时，这是可以的。我不确定这是否是Webpack的问题，Typescript可能是React组件生命周期的问题。
我已经完成了这个Microsoft/TypeScript-React-Starter的开发，并随后从中将其弹出
父组件：
import * as React from 'react';
import SingleFeature from './SingleFe
浏览 0提问于2017-06-19得票数 2
const {A, B, C, D} = React.lazy(() => import("../test")); 从一个文件夹中解构多个组件并将lazy应用到所有组件？这个是可能的吗？
浏览 26提问于2020-12-09得票数 1
我正在尝试调用一个初始数据函数来设置上下文中的状态。这应该使用来自组件的MetaDataData.json对象设置上下文的状态，该组件具有一些用于测试的初始值。它当前给了我一个错误： Uncaught TypeError: Cannot read property 'initialDataLoad' of undefined 我真的不确定是什么导致了这种情况，如果有任何帮助，我将不胜感激。 MetaDateContainer.js import React from 'react'
//This is a json file with some dummy d
浏览 7提问于2019-05-07得票数 1
回答已采纳
我正在尝试运行一个我还没有创建的代码。我得到了以下错误：
TypeError:无法读取未定义的属性“getElementById”
Module.<anonymous>
C:/Users/src/index.js:6
3 | import App from './App';
4 | import registerServiceWorker from './registerServiceWorker';
5 |
6 | ReactDOM.render(<App />, document.getElementById(
浏览 1提问于2021-04-16得票数 1
回答已采纳
我已经创建了2个Python文件，它保存在OOP_1文件夹中。当我尝试运行时会出现错误，而且在从Python文件导入类时，我无法理解使用.的目的。
我尝试从相关的Python文件中删除.student，.course，但是它不会在main.py中使用from OOP_1 import *运行。
student.py
学生: def __init__(self，name，number)：self._student_name = name self._student_number =self._student_name
从student_limit__init__.py导入学生类课程(学生)：#实
浏览 2提问于2019-10-09得票数 0
我试图设计一个React来操作库存数据库。为了将项目添加到库存中，我创建了一个功能组件ItemAddForm。
ItemAddForm (以及许多未来的功能组件)需要引用数组itemTypes。应该如何以及在何处声明itemTypes？我想避免将itemTypes作为一个支柱传递给每个组件，但是我不知道上下文是否可以用于数组？itemTypes应该是全局的，如果是的话，如何声明全局变量呢？
浏览 0提问于2019-08-14得票数 0
回答已采纳
我正在写一个React应用程序，它应该从服务器获取数据(二进制pdf)，并在新的选项卡/窗口中显示为PDF。我知道如何找出显示部分，问题是我的代码中对新创建的窗口的引用丢失了。当您将以下文件放入普通的create-react-app项目并导入它时，您将看到变量_window将在Chrome和Firefox上返回新的窗口对象，但在Windows7 (IE11)和Windows10 (MS Edge)上将返回null。
import React, { Component } from 'react';
export default class Container extend
浏览 2提问于2017-04-11得票数 1
import './interface/App.css';
import { Home } from './interface/home';
import { Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<Router>
<div>
<Route exact path='/' component={Home}&
浏览 4提问于2022-07-15得票数 1
回答已采纳
我正在尝试向一个新注释显示一个带有表单的模式。我将包含一个表单的JSX传递给一个模式，输入的onChange方法触发，但不更新状态。我看到事件触发了console.log以及name和value的值，但状态没有更新。任何帮助都将不胜感激。 Modal.js import React from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
export default function MyModal(props) {
re
浏览 14提问于2019-02-15得票数 0
我不知道--dev和@type/package-name做了什么。
我试图将react颜色包添加到and本机项目中，但遇到了此错误。
Could not find a declaration file for module 'react-color'.
我通过使用加-dev@type/dev颜色来安装它来解决这个问题。
如果有人能搞清楚我的错误意味着什么以及这是如何解决错误的话会有帮助的。谢谢!
浏览 4提问于2021-10-21得票数 2
回答已采纳
3回答
我正在为我的组件编写测试，这些组件在应用程序中运行良好。导入和使用它们很好，但是让它们使用react-test-renderer并不是很好。例如，我有一个社交组件，它读取配置并呈现出链接。
./components/Social/social.js
import React from 'react'
import PropTypes from 'prop-types'
import config from '../../../content/meta/config'
import GithubIcon from '!svg-react
浏览 7提问于2020-02-05得票数 0
回答已采纳
1回答
我试图监听键盘开/关事件，使用键盘模块从‘react本机’，侦听器工作，但在接收器，我不能访问状态，因为‘这’引用的是全球得分，而不是这个组成部分的‘I’。
export default class SignupEmailScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
emailText: '',
continueTextFadeAnim: new Animated.Val
浏览 1提问于2017-10-22得票数 3
回答已采纳
1回答
我目前正在使用阿波罗的反应钩子进行GraphQL认证。我想重构一个突变，以便我可以使用所有不同的登录，如谷歌，Facebook，推特OAuth等。
import { useMutation } from '@apollo/react-hooks'
import { CREATE_POST_MUTATION } from '../../graphql/mutation'
const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION, {
onCompleted: data =>
浏览 1提问于2020-01-15得票数 1
回答已采纳
1回答
上下文
我正在与一个混合next.js和反应路由器应用程序工作。应用程序的一部分由react路由器(基于散列的)处理，部分由next.js路由器处理。有一些常见的组件使用与当前路由状态相关的钩子(例如useLocation)，如果缺少react路由器提供者包装器，这些组件就会崩溃。
问题
我想要编写一个钩子，返回useLocation (从react路由器-dom)或useRouter (从next.js)，这取决于它是否在当前上下文中检测到了react路由器提供者。
然后，我将在公共组件中使用这个钩子，这样不管它们在哪个上下文中使用，它们都能工作。
有一个类似的解决方案，用于检测是否使用us
浏览 2提问于2022-04-22得票数 1
1回答
我正试图在我的React项目中使用Playfab SDK，但是还没有成功。
我找不到解释得很好的文件。
创建了一个react应用程序：
npx create-react-app playfabtest
为nodejs安装PlayFab SDK：
npm安装playfab-sdk
注意到：( JavaScript (npm install playfab-web-sdk)还有另一个SDK，但我假设对于一个react应用程序，节点是正确的吗?)
用以下代码修改了项目上的App.js文件：(实际上，在许多方面，我尝试了最后一个尝试，但两者都不起作用)。
App
浏览 18提问于2022-01-17得票数 0
1回答
我正在尝试使用babel-寄存器和我的webpack配置。这是我的档案：
.babelrc
{"presets": ["react","env"]}
webpack.config.js.
const path = require('path');
module.exports = {
entry: {
'app' : './src/app.jsx'
},
output: {
filename: '[name].js',
浏览 4提问于2018-03-10得票数 1
当我在Reactjs中使用上下文时，通过使用钩子，我只能在其他模块中的函数组件中使用'useContext‘，但我想在其他模块中将其用于-->类组件<--，但我不能这样做，并且在浏览器控制台中我看到这个错误：==>> ((
ReferenceError: Cannot access 'MyContext' before initialization
Module.MyContext
http://localhost:3000/static/js/main.chunk.js:12:101
Module../src/news.js
F:/0 Reac
浏览 39提问于2020-03-04得票数 1
2回答
我一直在开发一个应用程序，用户每天都会输入存储在核心数据中的数据(两个属性是NSNumber，另一个属性是NSDate)，我希望通过允许用户通过单击按钮从外部文件(如csv或任何其他受支持的格式)导入数据来改进这一点。对于如何有效地开展这项工作，有什么建议吗？
谢谢。
编辑：只是添加了csv文件的屏幕截图，以及csv解析器作为NSArray的输出。基本需要分别获取属性并在单击按钮时将其存储在核心数据中。
-输入文件为csv:
-示例csv解析器输出(NSarray)：
浏览 10提问于2013-07-12得票数 2
回答已采纳
我想直接从twitter获取截图中所示的请求响应 当前的木偶剧演员代码如下所示。谁能告诉我如何修改它，以便直接从浏览器获得JSON响应？谢谢。 const puppeteer = require('puppeteer');
(async () => {
// const browser = await puppeteer.launch();
const browser = await puppeteer.launch({
headless: false
});
const page = await
浏览 46提问于2020-01-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
