реагировать на компонент рендеринга на основе данных сервера

Question

Итак, у меня есть несколько компонентов, импортированных в мой основной компонент:

import ServerCreator            from   './ServerCreator'
import RouterCreator            from   './RouterCreator'
import VolumeCreator            from   './VolumeCreator'

, и на основе данных, полученных при вызове ajax, я хотел бы визуализировать один из них с помощью ряда реквизит. Данные будут примерно такими:

data = {
displayName :"Server",
icon: "microchip"
createName: 'ServerCreator',
...
},

могу ли я это сделать?

const Component = React.createElement(data.createName,{...props},null)

что я делаю не так?

Answer 1

Вы не можете передать имена строковых компонентов в React.createElement, вместо этого вам нужно передать ссылку на компонент.

Что вам нужно сделать, так это сохранить карту для вашего Компонента в основном. js файле, например

import ServerCreator            from   './ServerCreator'
import RouterCreator            from   './RouterCreator'
import VolumeCreator            from   './VolumeCreator'

const map = {
    'ServerCreator': ServerCreator,
    'RouterCreator': RouterCreator,
    'VolumeCreator': VolumeCreator,
}

, а затем при рендеринге вам необходимо разрешить компонент из карты и рендеринг с использованием JSX напрямую

render() {
     ...
   const Component = map[data.createName];
   return <Component {...props} />
} 

Answer 2

React.createElement должен иметь в качестве первого аргумента элемент реакции, например div, section, span. Убедитесь, что первым аргументом является элемент.

React.createElement(
  type,
  [props],
  [...children]
)

Это простой рабочий пример.

let welcome = React.createElement(
  "section",
  { style: { color: "red" } },
  `Welcome to react world`
);

ReactDOM.render(welcome, document.querySelector("#root"));