如何使用动态函数名称ReactJS调用函数？-解网

问：

我创建了一个组件来显示字段名称。基本上，我正在研究UI Builder类型的UI，其中每个元素都有多个设置，并包含所有元素，如文本字段，数字字段，开关，复选框，单选，选择列表和下拉列表等。此列表根据所需的设置逐日增加。我为元素创建了一个单独的组件，我在其中基于键构建元素。

现在，问题是我正在构建一个“开关案例”来渲染元素。我现在已经创建了 40 个案例，而且很可能会进一步增长，这会导致错误的代码格式。

import { Fragment } from React;

function Elements() {
    function formFields(fieldData, data, info, options) {
        let fields;
        /** Main return function */
        switch (fieldData?.type) {
            case "number":
                return (
                    <InputField
                        // inputfield code here
                    />
                )
            case "switch":
                return (
                    <Switch
                        // switch code here
                    />
                )
            case "dropdown":
                return (
                    <Dropdown
                        // ........
                    />
                )
            case "shadowOffset":
                return (
                    <div className="mb-15">
                        //.......
                    </div>
                )
            . 
            . 
            . 
            // ...... multiple cases
            default:
                return null;
        }
    }

    return(
        <Fragment>
            {formFields(fieldData, data, info, options)}
        </Fragment>
    )
}

要求：：

我不想维护开关案例，而是想将案例拆分为函数，并希望使用动态变量数据动态调用函数名称（这意味着我将使用我在开关案例中使用的键创建函数名称，现在想使用动态名称调用这些函数。

我之前已经尝试过什么

我使用了“eval”js函数，但不推荐使用，从安全角度来看也不是一个好的选择。在ReactJS中是否有其他函数可以用作“eval”？
我还尝试使用“对象字面量”概念来实现这一点。我已经转换了对象及其键中的开关大小写，然后用键调用函数。但问题是我无法将数据作为参数传递到称为 inside object literal 的函数中。我在 JSX 中这样调用：

myObjectLiteral[dynamicKey]（参数 1，参数 2）

在对象文字调用后添加（）时出现错误：

元素.js：715 未捕获的类型错误：字段[（0 ， Services_BuilderServices__WEBPACK_IMPORTED_MODULE_5__.getFieldType）（...）] 不是函数

基本上，我无法使用动态变量调用函数文字字符串。

请帮助建议我如何使用 ReactJS 中的动态变量调用函数名称。

javascript reactjs 对象文字

import { Fragment } from React;

const mapComponent = {
  number(props) {
    return <InputField {...props}
                        // inputfield code here
                    />
  },
  ...
  dropdown(props) {
    return <Dropdown {...props}
                        // ........
                    />
  },
  ...
}

function Elements() {
    function formFields(fieldData, data, info, options) {
        /** Main return function */
        return mapComponent[fieldData?.type]?.(options) ?? null
    }

    return(
        <Fragment>
            {formFields(fieldData, data, info, options)}
        </Fragment>
    )
}

如何使用动态函数名称ReactJS调用函数？

How to call function using a dynamic function name ReactJS?

评论

评论