React（本机）通过道具获取功能/动作名称

发布于 2025-01-20 14:14:46 字数 1648 浏览 2 评论 0原文

我正在使用React Antial和Redux。现在，我想创建一个动态组件，例如下拉组件。我通过道具通过状态可以正常运行，但是要使此组件重新使用，我必须调用此状态的正确调度函数。我不确定这是否是正确的方法。我只使用一个星期的反应;）

为简单起见，简单的文本字段组件：

import React, {Component} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import allActions from '../../actions/allActions';
import {useDispatch, useSelector} from 'react-redux';

function Name (props) {
    const dispatch = useDispatch();
    const componentState = props.state;

    /**
     * Save the new user to the state
     * @param text
     */
    const handleChange = (text) => {
        // here I want to call the action dynamically
        // e.g. allActions.userActions.MY_VARIABLE_PASSED_THROUGH_PROPS
        dispatch(allActions.userActions.setUser(text));
    }
        return (
            <View>
                <TextInput
                    style={styles.input}
                    defaultValue={componentState}
                    onChangeText={handleChange}
                />
            </View>
        );
}

export default Name;

当我对组件进行分配时，我通过状态

<Name state={ store.getState().user.name } action={my_action_to_call}/>

编辑：这是我的UserAction

import * as actions from '../actionTypes';
const setUser = (userObj) => {
return {
    type: actions.SET_USER,
    payload: userObj
}
}
const setGender = (userObj) => {
return {
    type: actions.SET_GENDER,
    payload: userObj
}
}

export default {
setUser,
setGender
}

原文

I am using react native and redux. Now I want to create a dynamic component, for example a dropdown component. I pass a state via props which works fine but to make this component re-usable I have to call the right dispatch function for this state. I am not sure if that is the right way to do. I am only working with react for a week now ;)

For the sake of simplicity a simple text field component:

import React, {Component} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import allActions from '../../actions/allActions';
import {useDispatch, useSelector} from 'react-redux';

function Name (props) {
    const dispatch = useDispatch();
    const componentState = props.state;

    /**
     * Save the new user to the state
     * @param text
     */
    const handleChange = (text) => {
        // here I want to call the action dynamically
        // e.g. allActions.userActions.MY_VARIABLE_PASSED_THROUGH_PROPS
        dispatch(allActions.userActions.setUser(text));
    }
        return (
            <View>
                <TextInput
                    style={styles.input}
                    defaultValue={componentState}
                    onChangeText={handleChange}
                />
            </View>
        );
}

export default Name;

I pass the state when I instatiate the component

<Name state={ store.getState().user.name } action={my_action_to_call}/>

EDIT: This is my userAction

import * as actions from '../actionTypes';
const setUser = (userObj) => {
return {
    type: actions.SET_USER,
    payload: userObj
}
}
const setGender = (userObj) => {
return {
    type: actions.SET_GENDER,
    payload: userObj
}
}

export default {
setUser,
setGender
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小猫一只 2025-01-27 14:14:46

我发现了：

组件调用

<Dropdown title={'Gender'} placeholder={'Select your gender'} action={userActions.setGender} state={ store.getState().user.gender } data={gender_data} />

，这是处理功能：

    const handleChange = (e) => {
    let action = _props.action(e.value);
    dispatch(action);
    }

I figured it out:

Component call

<Dropdown title={'Gender'} placeholder={'Select your gender'} action={userActions.setGender} state={ store.getState().user.gender } data={gender_data} />

and here is the handleChange function:

    const handleChange = (e) => {
    let action = _props.action(e.value);
    dispatch(action);
    }

回复收藏 0 原文

灵芸 2025-01-27 14:14:46

不用担心！没错。为了在 React 中制作动态组件，你必须通过 props 传递值和函数。
您的操作是函数，因此您可以轻松地传递函数并在组件中调用它。如果我是你，我肯定会这么做。喜欢：

const nameAction = (name) => {
        return {
              type: SET_NAME,
              payload: name
             }
           }
<Name state={ store.getState().user.name } action={nameAction}/>

Don't worry! That is right. for making dynamic components in react you do have to pass values and fuction via props.
Your actions are fuctions, so easily you can pass your function and call it in your component. If I were you, I would definitely do that. like:

const nameAction = (name) => {
        return {
              type: SET_NAME,
              payload: name
             }
           }
<Name state={ store.getState().user.name } action={nameAction}/>

回复收藏 0 原文

~没有更多了~