基于服务器数据的react渲染组件

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，而是需要传递组件引用。

您需要做的是在main.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"));