Question

如果我有一个类似的节点的嵌套对象（忽略语法）：

const el = {
  node: {
    name: 'Svg',
    attrs: { height: "40", width: "40", viewBox: "0 0 22 22" },
    children: [
      {
        node: {
          name: 'G',
          attrs: null,
          children: [
            {
              node: {
                name: 'Path',
                attrs: { d: "M15.39,1c0.107" },
                children: nullm
              }
            }
          ]
        }
      }
    ]
  }
};

是否可以在我的React Native应用程序的JS中动态地和动态地创建一个没有babel的嵌套“编译”React元素，如：

function el() {
  return React.createElement(
    Svg,
    { height: "40", width: "40", viewBox: "0 0 22 22" },
    React.createElement(
      G,
      null,
      React.createElement(
        Path,
        { d: "M15.39,1c0.107" }
      )
    )
  );
};

Answer 1

你想做那样的事吗？

function createNodeElement(node) {
  return React.createElement(
    node.name,
    node.attrs,
    node.children && node.children.map(el => createNodeElement(el)),
  )
}

如果答案无法满足您的需求，我们可以进行更多讨论。

Answer 2

@lumio纠正了我的课程，我只需要渲染js数据结构。所以使用以下js：

const json = {
  type: 'Svg',
  props: {
    height: 170,
    viewBox: '0 0 100 170',
    width: 100,
  },
  children: [
    {
      type: 'Path',
      props: {
        d: 'M100 0H50v85l50-85z',
        fill: '#0f0',
      },
    },
    {
      type: 'Path',
      props: {
        d: 'M0 170h50V85L0 170z',
        fill: '#a0f',
      },
    },
  ],
};

以下组件：

const types = { Svg, Path };
const jsonToComponent = (obj, key) => {
  const El = types[obj.type];
  const children = obj.children ? obj.children.map(jsonToComponent) : [];

  return (
    <El
      key={key}
      {...obj.props}
    >
      {children}
    </El>
  );
};

我可以在另一个虚拟组件中渲染它：

render() {
  return jsonToComponent(props.json);
}

如何在没有babel的情况下动态创建“已编译”的React组件？

2 个答案: