如何在本机反应中渲染子数组组件

Question

I want to render dynamic component But I cannot able to render children component nextcomp[]. currently only first component Text rendering. But now I want to use render component checkbox and so on

const item=[ { component: "text", label: "Name", Type: "text", nextComp: [ { component: "checkbox", label: "yes", question: "Do you Play football", type: "checkbox", }, { component: "text", label: "Age", Type: "text", nextComp: [ { component: "checkbox", label: "yes", question: "Do you Play football", type: "checkbox",
}, { component: "text", label: "Gender", Type: "text", } ], }], }, ]

App.js I mapped like

 {item.map(block => Components(block))}

I am rendering component like

 const Components = {
      Text: Text,
      checkbox: Checkbox
    };
    
export default block => {
  if (typeof Components[block.component] !== "undefined") {
    return React.createElement(Components[block.component], {
      key: block,
      block: block
    });
  }
  return React.createElement(
    () => <View>The component {block.component} has not been created yet.</View>,
    { key: block}
  );

};

Answer 1

In the text or checkbox react component, you have to dynamically iterate over next comp array and again call the block component.