Существует ли оптимальный способ записи динамического переключения компонентов в React?

Question

При написании компонентов для макета, который должен быть динамически переключаться с помощью данных из внутреннего интерфейса, я часто пишу Реагировать компоненты, которые выглядят следующим образом:

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

Вы можете использовать требуемую динамическую загрузку модулей. Однако вы должны определить где-то, что такое путь модуля компонента. Например:

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

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

Answer 2

Если вы используете инструмент сборки, такие как 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; 

Answer 3

Как об этом:

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 гораздо сложнее понять.