遍历json并创建react组件

您可以创建一个调用自身的函数。

样品

parseComponents = (data, key) => {
  if (key === undefined || key === null) key = 0;
  let Component = null;
  switch(data.component) {
    case 'View': 
      Component = View;
      break;
    case 'Text':
      Component = Text;
      break;
    case 'Link':
      Component = Link;
      break;
    default:
      break;
  }
  if (Component === null) return Component;

  return (
    <Component key={`${data.component}-${index}`} {...data.attributes}>
      {data.child.map((c, index) => this.parseComponents(c, index))}
    </Component>
  )
}

您可以如下示例: 假设您的json存储在 const json 是的。

getComponent = (json) => {
if (json.component) {
  let children;
  if (json.children) {
     children = json.children.map(child => this.getComponentEquivalent(child));
  }

  let Container= this.getComponentEquivalent(json);

  return (<Container>{children}</Container>); // as this will return a component you can directly put this in render.
 }
};

然后你可能有一个函数,你可以得到等价的组件。

getComponentEquivalent = (object) => {
    switch(object.component) {
      case "Text":
          return <Text>{object.content}</Text>
      case "Link"":
          return <Link>{object.content}</Link>
      //......./
      default:
           //..../
    }
};