Question

在为需要通过后端数据动态切换的布局编写组件时，我经常发现自己编写的React组件如下所示：

import React from 'react';
import TextInput from './TextInput';
import DateInput from './DateInput';

const Input = (props) => {
    const {
        type,
        ...otherProps
    } = props;
    switch (type) {
        case 'text':
            return <TextInput {...otherProps} />;
        case 'date':
            return <DateInput {...otherProps} />;
        // etc…
        default:
            return null;
    }
};

export default Input;

当扩展类型时，导致导入列表膨胀。

是否有任何替代方法可以使动态组件切换比这个更优化/更高效/更可靠？

Answer 1

这个怎么样：

import React from 'react';
import TextInput from './TextInput';
import DateInput from './DateInput';

const TYPES = {
  text: TextInput,
  date: DateInput,
};

const Input = (props) => {
    const {
        type,
        ...otherProps
    } = props;
    const Component = TYPES[type];
    if (!Component) return null;

    return <Component {...otherProps} />;
};

export default Input;

通常，您希望在某处枚举可能的选项，并且对象查找是一种简单的方法。其他答案提到的动态require调用通常有点可疑，因为工具无法分析依赖关系，这意味着您更难理解API。

Answer 2

您可以使用require动态加载模块。但是，您必须在某处定义组件模块路径。例如：

const components = {
  text: 'TextInput',
  date: 'DateInput',
};

const Input = (props) => {
    const { type, ...otherProps } = props;
    const Component = require('./' + components[type]);
    return type ? <Component {...otherProps} /> : null;
};

Answer 3

如果您使用构建工具，例如webpack，则支持动态需要，这允许您执行以下操作：

import React from 'react';

const typeMap = {
  text: 'TextInput',
  date: 'DateInput'
};

const Input = (props) => {
    const {
        type,
        ...otherProps
    } = props;

    const typeInput = typeMap[type];

    if (!typeInput) return null;

    const InputComponent = require(`./${typeInput}`);

    return <InputComponent { ...otherProps } />;
};

export default Input;

有没有一种在React中编写动态组件切换的最佳方法？

3 个答案: