如何在不向React Native中子组件指定参数的情况下传递需要参数的函数
在React Native中，如果你想在父组件中定义一个需要参数的函数，并将其传递给子组件，但又不想在子组件中指定参数，你可以使用箭头函数或者bind方法来实现。
- 使用箭头函数： 在父组件中定义一个需要参数的函数，并将其作为props传递给子组件。在父组件中，使用箭头函数来包装需要传递的函数，并在箭头函数中传入所需的参数。然后将包装后的函数作为props传递给子组件。
示例代码如下：
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick = (param) => {
// 在这里处理传递的参数
console.log(param);
}
render() {
return (
<ChildComponent onClick={(param) => this.handleClick(param)} />
);
}
}
export default ParentComponent;在子组件中，可以直接调用props中传递的函数，而不需要指定参数。
- 使用bind方法： 在父组件中定义一个需要参数的函数，并将其作为props传递给子组件。在父组件中，使用bind方法来绑定需要传递的参数，并将绑定后的函数作为props传递给子组件。
示例代码如下：
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick(param) {
// 在这里处理传递的参数
console.log(param);
}
render() {
return (
<ChildComponent onClick={this.handleClick.bind(this, '参数')} />
);
}
}
export default ParentComponent;在子组件中，可以直接调用props中传递的函数，而不需要指定参数。
这样，无论使用箭头函数还是bind方法，都可以在不向React Native中的子组件指定参数的情况下传递需要参数的函数。
相关·内容
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
我买了一个关于Udemy的反应本土化课程，教React的人使用了{...this.props}。但这对我没用。这是错误消息。
TypeError:未定义不是对象(计算'_this.props')
我该怎么办？
LoginForm.js
import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const
浏览 6提问于2020-03-04得票数 1
回答已采纳
3回答
我试图在React本机中编写一个可重用的标头组件。我想以这样的方式编写它，即左、右按钮可以作为子组件传递。要知道在哪里渲染哪个按钮，我想传递一个道具，比如rightIcon或leftIcon。然而，我不知道如何获得这些道具。
这是我的App.js文件
import React from 'react';
import {StyleSheet, TouchableHighlight, View} from 'react-native';
import Header from "./src/Header";
import {Ionicons} fro
浏览 1提问于2018-02-07得票数 6
回答已采纳
我有一个包含阵列的应用程序从存储中获取并将其传递到屏幕 这是一个简单的版本。如果getItem延迟了，则在渲染后屏幕数组会自动更新 import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage'
import Vocabulary from "./Screens/Vocabulary";
export default function App() {
const [ vocabulary, setVocabul
浏览 44提问于2021-01-09得票数 1
3回答
如何在JSS中指定:焦点属性？
、、、、
我将react-native-web与expo和react-native-paper (material ui)一起使用
我的问题是在编译的web版本中的焦点轮廓属性上的文本区域，所以我需要去掉这个蓝色边框。通常我会这样做
textarea:focus {
outline:none!important
}
对于react-native，我们不能只使用jss而使用css，但是如何使用这个属性呢？
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => thi
浏览 0提问于2019-09-01得票数 1
6回答
我想在我的React Native应用程序中实现一个从父组件到子组件的事件侦听器，我使用StackNavigator作为路由器。
如何侦听顶级/父组件中发生的事件？
浏览 0提问于2017-11-16得票数 5
我对react-native非常陌生。
谁能告诉我如何使用react-native-router将数据传递到另一个屏幕。
我有一个平面列表，当点击一个列表项时，它会显示一个警报，当我点击ok按钮时，它会显示RxNumberin next screen。
这是我的全班
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
Image,
Alert
} from 'react-native';
import { Act
浏览 1提问于2018-12-17得票数 1
因此，我试图用react制作一个待办事项应用程序，我只是尝试使用上下文，而我一直没有定义它是不可迭代的：
这是Main/index.js：
import React,{useContext} from "react";
import { BrowserRouter as Router,Routes, Route, Link} from 'react-router-dom';
import {GlobalContext} from "../Context/provider.js"
import TodoForm from "../Todo-
浏览 7提问于2022-08-11得票数 1
回答已采纳
3回答
我使用const来显示组件。现在，当我对const中的按钮使用react导航时，我看到这个错误:未定义的不是一个对象(计算'_this.props.navigation.navigate') 我尝试将navigation={this.props.navigation}添加到按钮以允许禁烟，但不起作用。 const WomenTab = () => (
<View>
<Button onPress={() => {
this.props.navigation.dispatch(St
浏览 16提问于2019-02-08得票数 2
回答已采纳
我不知道该如何解决这一问题，我对本土的反应很陌生。
这是我的Login.js
import React from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import { Headline, Paragraph, TextInput, Button, Snackbar, Portal } from 'react-native-paper';
import UserModel from '../../app/models/UserModel&#
浏览 16提问于2022-08-11得票数 0
回答已采纳
在我的functional-component-based React本地应用程序中，我想在不同的屏幕之间导航，每个屏幕都驻留在一个单独的.js文件中。我希望能够像这样在多层深度导航：
Screen1.js <-> Screen2.js <-> Screen3.js <-> Screen4.js
出于某种原因，在中将所有屏幕放置在同一个App.js文件中，每个屏幕都作为自己的独立函数，我认为这是不寻常的开发人员行为。
我希望导航堆栈位于一个NavigationService.js文件中，然后由每个Screen#.js文件导入导航堆栈。我怎样才能实现这一点呢？
浏览 2提问于2021-08-24得票数 0
回答已采纳
我看过类似的问题，但似乎没有一个解决方案对我有用，这已经困扰了我两天了。
这个错误似乎来自于将this.props.navigate传递给exerciseList.js，但是我尝试过的一切都不起作用。因此，任何建议都将不胜感激。当我通过exerciseList.js单击单独呈现的文件时，会发生错误。
错误消息：
undefined is not a function (evaluating '_this2.props.navigate('Exercises', { exerciseName:ex})')
package.json
"depend
浏览 0提问于2019-02-21得票数 0
回答已采纳
首先，我想再重复一遍，我问的是它在react-native中的用法，而不是ReactJS。我只是感到困惑，在react-native中使用<>代替<View>或<SafeAreaView>作为root Component有什么特别的好处吗？
我有一个比100 components tree更大的应用程序，现在root是这样的吗？
const App = () => (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content&
浏览 0提问于2020-07-27得票数 0
我的应用程序以前运行良好，没有生成或运行时错误。然后，我将react-native-agora从^2.9.1更新到^3.0.1-rc.4。有个坠机的问题被
pod installreact-native start --reset-cache
我现在的问题是，应用程序卡在启动屏幕上，并在iOS RNv0.61.5上给出了这个错误：
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
到目前为止，我已经尝试过：
在模拟器和coderemoving文
浏览 0提问于2020-08-12得票数 2
回答已采纳
2回答
我是react原生的新手。我已经使用了Wix react-native导航库来在页面之间导航。我想为导航编写一个单独的类，比如bellow，并在我的项目中需要它的任何地方调用它。但是我得到了"this.props.componentId“的错误。下面是我的导航函数： ScreenNavigation.js import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Co
浏览 11提问于2019-01-23得票数 0
2回答
我正在尝试从另一个主要从屏幕调用的组件内部使用React Navigation。层次结构:登录屏幕有一个按钮组件，该按钮组件设计了一个TouchableOpacity组件，该登录按钮应该调用另一个屏幕Home。
login.js
import React, { Component } from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { withNavigation } from 'react-navigation';
imp
浏览 3提问于2020-01-05得票数 0
我是一名学生，我开始开发关于书籍的移动应用程序。我正在尝试使用axios和api来获取随机的图书列表。我是React-Native的初学者，所以我试图找到如何使用，但许多教程视频使用组件来创建应用程序。我使用函数。我找到了一些帮助我的代码，但这些代码属于React.js。我无法转换为React-Native。以下是代码。
import React, { useState } from 'react';
import {View,Text,Button,StyleSheet,TextInput,TouchableOpacity} from 'react-native
浏览 0提问于2020-07-08得票数 0
我有一个名为AuditionItem的组件，其多个实例被添加到名为AuditionsList的父组件中。
我已经完成了导出默认连接(MapStateToProps)(AuditionItem)
根据我的经验，mapStateToProps只对AuditionItem的一个实例(启动状态更改的实例)调用。但是，我希望对每个mapStateToProps实例调用AuditionItem。
有办法这样做吗？
下面是我的AuditionItem.js代码：
import React from 'react';
import { StyleSheet, Text, View, Image
浏览 1提问于2018-06-29得票数 0
回答已采纳
我希望将React Native Button组件的标题传递给相邻的函数。我只将React Native functional components用于此应用程序。
这是组件。我希望将用户按下的按钮的标题传递给函数submitLanguageSelection，它将是“英语”或“阿拉伯语”，这样我就可以将该值保存到useLocalStorage()中，这是我编写的处理AsyncStorage的自定义钩子，这样用户下一次使用该应用程序时，他们的语言选择将保持不变，并且不会再次显示ChooseYourLanguageScreen。
感谢大家的帮助，谢谢。
const ChooseYourLangu
浏览 3提问于2020-09-05得票数 0
我有一个父组件和一个子组件，如下所示。
父组件：
constructor(){
this.refs = React.createRef();
}
setRef(ref) {
console.log(ref)
}
handleChange(e) {
console.log(e)
}
render() {
return(
<ChildComponent ref={this.setRef} handleChange={this.handleChange.bind(this)}/>
)
}
子组件：
render() {
浏览 2提问于2019-05-09得票数 4
回答已采纳
1回答
使用来自react-native-gesture-handler的react-native-gesture-handler和带有useAnimatedGestureHandler的react-native-reanimated将引发此错误。
期望onGestureHandlerEvent侦听器是一个函数，而是得到一个object类型的值
这些是正在呈现的组件，
<View style={[styles.center]}>
<Text style={{color: "#555", fontSize:16, marginTop: 120, margin
浏览 5提问于2022-05-20得票数 3
回答已采纳
我在反应本土化方面是很新的，而且我正在收到这个错误。请帮忙！navigation.navigate is not a function. (In 'navigation.navigate("HomeScreen")', 'navigation.navigate' is undefined)
import { View, Text,Button,StyleSheet, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
浏览 4提问于2022-05-04得票数 0
回答已采纳
我一直在重新调整我制作的应用程序的方法，开始使用类和更多面向对象的样式，并对页面使用单独的文件，而不仅仅是在主文件中敲击函数中的所有内容。 这是App.js import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigat
浏览 7提问于2020-10-24得票数 2
回答已采纳
我刚把我的项目从39号更新到42个。该项目使用ReactiveNavigation4。在更新之前，一切正常，现在我得到了一个恼人的错误：
警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查您在App.js:89的代码。
in (由ExpoRoot创建)
在ExpoRoot (at renderApplication.js:45)
在RCTView (at View.js:34)
在视图中(在AppCont
浏览 0提问于2021-08-20得票数 0
我是React领域的新手，我想知道如何在两个组件之间共享状态。
我找到了一个解决方案，但我不知道它是否正确。
解决方案包括将组件的状态作为道具从父组件路由到子组件，并使用此道具设置子组件的状态。从子节点到父节点，将更新后的状态作为道具进行路由，并使用useEffect设置新状态。
我写了一个简单的代码来更好地解释我的问题。
代码可以工作，但我不确定这是正确的方式。
我有两个屏幕Home和DeleteItem。
Home screen的目的是渲染一个项目数组，这是Home组件的状态。通过按下按钮，我将状态转到DeleteItem Screen。
DeleteScreen应该共享相同的HomeSc
浏览 0提问于2020-04-07得票数 1
我正在尝试为Backhandler实现自组织。我有三个组件都是用createBottomTabNavigator包的，家里就是其中之一。但是在实现回传之前，需要特别显示这个错误。
组件主页-
import React, { Component } from 'react';
import {Text,View} from 'react-native';
import updateComponent from './HOC/updateComponent';
class home extends Component {
constructor(p
浏览 0提问于2019-04-22得票数 1
3回答
我使用react-native init创建了一个新的React Native项目，在生成的模板中，main component类如下所示：
export default class App extends Component<{}> {
...
}
我真的不明白<{}>部分是什么意思。我以前从未见过这种情况，所有的例子似乎都忽略了这一点。只是好奇它的目的是什么，以及它是否必要。
浏览 0提问于2017-12-27得票数 0
1回答
我有一个具有打开和关闭函数的可滑动组件，我想从该组件的子组件中触发该函数。我不认为在这种情况下使用状态来做这件事是正确的，因为我希望在可滑动组件动画时避免重呈现(如果我错了，请纠正我)。
我正在使用react本机-手势-处理程序/可滑动，并遵循他们的例子
SwipeCard组件
import React, { useRef } from 'react';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gestu
浏览 4提问于2022-01-25得票数 1
回答已采纳
1回答
我正在尝试不同的方式来显示一个基于状态的条件按钮，但是我总是遇到麻烦。我有一个app.js，它定义了堆栈导航器，它向标头添加了一个按钮，提供了如果经过身份验证就注销的选项。
我编写了一个应该执行此操作的handleLogout函数。
import React from 'react';
import { Button, Image, View, Text } from 'react-native';
import firebase from 'react-native-firebase';
import Loading from './L
浏览 3提问于2020-02-17得票数 0
回答已采纳
我正在做基本的react原生导航示例，但当我试图让它工作时，我得到了错误！
以下是导航模块：
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation
浏览 4提问于2021-04-01得票数 0
在我的mapStateToProps函数中，我将idToken和accessToken设置为存储在状态中的值。这是可行的，因为我已经能够从组件中引用这些值。在mapDispatchToProps中，我尝试在我的操作中使用这些道具作为参数。但是，ownProps是一个空对象。为什么它没有idToken和accessToken
容器：
import { connect } from 'react-redux'
import { toggleAddQuestionModal, fetchFriends } from '../actions'
import AddQue
浏览 5提问于2016-04-10得票数 19
回答已采纳
当我尝试将数据从登录屏幕传递到MyProfile屏幕时，我得到了未定义的值。
我很困惑，为什么我会得到未定义的值？
这是我的主要导航文件的代码。
route.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator
浏览 0提问于2021-03-10得票数 0
在使用开关导航绑定导航时返回此错误。
我试过移除这个。然后道具返回未定义的“导航”。
import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'rea
浏览 0提问于2019-01-17得票数 1
回答已采纳
1回答
我无法获得商店减缩器initialState，所以我也不能映射到组件中的道具。
这是我的减速机：
const initialState = { currentUser: null }
export default function UserReducer(state = initialState, action){
let nextState;
switch(action.type){
case "USER_CONNECTED":
nextState = {
...state,
current
浏览 0提问于2019-04-15得票数 0
回答已采纳
当我将卡片组件添加到app.js中时，它会显示以下错误：
(错误:对象作为React子对象无效(找到:具有键{}的对象)。如果您打算呈现一个子集合，则使用一个数组)。
我没有添加任何对象来添加键。在AppText组件中，我只传递了子道具，并在Card组件中用作标题和字幕。
import React from 'react';
import Card from './app/components/Card';
import {View} from 'react-native';
export default function App() {
浏览 0提问于2021-10-30得票数 0
回答已采纳
我在react-native中创建了一个登录页面，其中创建了三个页面: Login.js -这是我导入两个组件的主页，组件是- Form.js和Loginapi.js。在Form.js的所有UI部分，如用户名，密码和按钮，并在按钮点击我调用，Loginapi.js逻辑脚本-在成功登录后，我必须转到HomeScreen页面。但我得到了TypeError: undefined is not an object (evaluating '_this.props.navigation) '
我尝试了很多方法来解决这个问题。通常我可以导航到所有屏幕，但在这里我使用的是组件，并且在成功登录
浏览 0提问于2019-02-05得票数 0
1回答
我在我的react本机应用程序中创建屏幕之间的导航，但是我有一个问题，我有一个父视图，当我试图将导航作为子视图的一个支柱时，它内部呈现了一个子视图，它给了我一个错误，谁能告诉我应该如何传递它吗？以下是我试图做的事情：
App.js：
import React, { Component } from 'react';
import Parent from './components/Parent';
import {
createStackNavigator,
} from 'react-navigation';
const App
浏览 0提问于2018-09-17得票数 2
回答已采纳
2回答
调用另一个脚本的状态
、、、
大家好，我有运行在整个应用程序中的脚本App.js，我的页面用于响应导航(抽屉)，即Screen3.js
我想给我的州打电话。从App.js到Screen3。我的速度每10秒就会改变一次。
App.js
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
import CustomSidebarMenu from './CustomSidebarMenu
浏览 2提问于2019-12-23得票数 0
我正在使用react-native-google-places，但我需要限制2个或更多国家的搜索，如丹麦和美国。但在react-native-google-places中，我唯一的选择是country，它只接受一个国家。如何不使用纬度、经度和半径来解决这个问题？
RNGooglePlaces.openAutocompleteModal({
country: 'us', // need to use 'us', 'dk' or somethink like ['us', 'dk']
浏览 4提问于2018-09-24得票数 1
我是Reactive原住民的新成员，我坚持住了:)
我需要用正确的邮件和密码登录到主屏幕(Anaekran.js)。我从API获得邮件和密码信息。
当我按下按钮(MyButton)时，我希望代码检查邮件和密码，如果正确的话重定向到主屏幕(Anaekran.js)，但是什么都不会发生。我找不到问题。我真的很感激你能提供的任何帮助。我将无条件地回答你的答案和问题。
我使用路由器流量来导航过程。我不共享Anaekran.js，因为我认为我们现在不需要Anaekran.js。
有些方法，文件名是土耳其语。
这是LoginSayfasi.js (登录页面).
import React, {Compone
浏览 0提问于2020-01-02得票数 0
回答已采纳
我最近正在学习自己的反应，但我发现ReactDOM.render的用法令人困惑
function UniversityList(){
return React.createElement(
"ul",
{id: "universities"},
React.createElement("li",
{id: "Waterloo",
className:
浏览 1提问于2020-11-05得票数 0
回答已采纳
我已经创建了两个组件(父组件和子组件)&导入包含react-native模式的子组件 我在状态改变后渲染子组件，它第一次渲染，但在第二次，它不工作。 Parent.js文件如下： import react, {Component} from 'react';
import { View, Text, TouchableOpacity} from 'react-native';
import ActionModal from './ActionModal';
export default class Parent extends Com
浏览 23提问于2019-09-22得票数 0
我正在尝试使用React-Native navigator (v6)方法在React-Native中的组件之间传递roomID。我解构了{导航，路由}，路由总是未定义的，但它不应该是。我使用的是@react-navigation/native-stack : "^6.1.0"。我是个新手，所以我注入Redux / Stack Navigator的方式绝对是低效的： package.json版本： "dependencies": {
"@react-navigation/native": "^6.0.2",
&
浏览 53提问于2021-09-06得票数 0
/这是主屏幕，在这里我尝试转到“组件”。它不能识别'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text&
浏览 2提问于2019-09-10得票数 0
我是Repar原住民的菜鸟，我对如何编程一个浮动按钮来打开React本地导航抽屉感到困惑。
现在，我正在调用MapScreen.js中的按钮。这个按钮叫做FloatingButton.js。
当我按下按钮时，我遇到了"ReferenceError:无法找到变量:导航“的错误。
有点序言，我一直在使用汉堡包菜单的标题打开抽屉菜单。
App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-na
浏览 3提问于2020-07-15得票数 0
回答已采纳
我有一个组件，这个组件只是一个WebView。
我调用了这个组件，希望通过promises返回结果。
我必须确保在加载WebView并运行onNavigationStateChange之后，我必须返回一个返回结果的承诺。
Main：
import * as React from 'react';
import { View } from 'react-native';
import ShortUrl from './ShortUrl';
export default class App extends React.Component {
c
浏览 2提问于2018-12-04得票数 0
由于我刚开始接触react-native，我只是尝试在react-native中构建一个可以导航的简单应用程序。
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
import {Navigatio
浏览 0提问于2020-02-20得票数 1
回答已采纳
我有这个问题的反应本机，反应导航，即使有这个错误导航流仍然工作。
类型' string‘的参数不能分配给类型'{ key: string；params?：undefined；merge?：boolean；}{ name: not；key?：string\未定义；params: not；merge?：boolean；}'.ts(2345)
export function LoginContainer() {
const navigation = useNavigation()
async function handleSignInEmail() {
浏览 15提问于2022-01-18得票数 0
我正在用React Native创建一个聊天应用程序，它接收不同的“消息类型”作为响应。其中一个包含一个按钮数组，我目前正在组件"ChatQuickReply“中的Flatlist中呈现这些按钮，如下所示： import React from "react";
import {
StyleSheet,
FlatList,
View,
TouchableOpacity,
Text
} from "react-native";
class ChatQuickReply extends React.Component {
const
浏览 28提问于2019-04-10得票数 2
回答已采纳
考虑一个使用react-native导航器的简单stack navigator：
const stackNav = createStackNavigator(
{
CustomerList: {
screen: CustomerList,
navigationOptions: {
title: "Select a customer"
}
},
CustomerDetail: {
screen: CustomerDetail
}
},
{
navigationOpt
浏览 1提问于2018-08-24得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
