从多级嵌套对象数组 reactjs 创建嵌套 JSX 元素答案

【问题标题】：Create nested JSX elements from multi-level nested array of objects reactjs从多级嵌套对象数组 reactjs 创建嵌套 JSX 元素
【发布时间】：2019-09-13 04:53:46
【问题描述】：

我有以下 JSON 结构，我需要将其转换为等效的 JSX 元素结构。标签可以是任意的，也可以无限嵌套。

[
  {
    "tag": "div",
    "children": [
      {
        "tag": "p",
        "text": "hey",
        "style": {
          "color": "red",
          "fontSize": "12px"
        }
      }
    ]
  },
  {
    "tag": "div",
    "text": "Yo"
  }
]

应该呈现为

<div>
  <p 
    style={{ 
      color: 'red',
      fontSize: '12px'
    }}>hey</p>
</div>
<div>Yo</div>

【问题讨论】：

子元素有多少级？
@ShubhamKhatri 理论上是无限的
到目前为止你有没有尝试过？
很遗憾，没有什么有价值的

标签： javascript reactjs jsx

【解决方案1】：

你可以递归调用一个函数并使用 React.createElement 返回渲染的元素

function renderData(data) {
  return data.map(item => {
    return React.createElement(
      item.tag,
      { style: item.style },
      item.children ? renderData(item.children) : item.text
    );
  });
}
function App() {
  return <div className="App">{renderData(data)}</div>;
}

Working demo

【讨论】：

大卫，让我知道以上答案是否对您有帮助
如果它没有帮助他，它帮助了我（因为我只知道如何使用 JSX）。

【解决方案2】：

这是一个 JSX 版本。

请注意，只有在有子节点时才会调用递归调用。

 const data = [
  {
    "tag": "div",
    "children": [
      {
        "tag": "p",
        "text": "hey",
        "style": {
          "color": "red",
          "fontSize": "12px"
        }
      }
     ]
   },
   {
    "tag": "div",
    "text": "Yo"
  }
 ];


const Elements = ({elements}) => {
    return (
      <React.Fragment>
         {elements && elements.map(element => {
            let {tag, text, children, style} = element
            if(tag === "div") {
                 return(
                    <div style={style ? style: {}}>{text}
                       {children && <Elements elements={children}/>}
                     </div>
                   )
             } else if(tag === "p") {
                 return(
                    <p style={style ? style: {}}>{text}
                       {children && <Elements elements={children}/>}
                   </p>
                  )
            } 
        })}
     </React.Fragment>
);}

function render() {
  ReactDOM.render(<Elements elements={data} />, document.getElementById("root"));
}

render();

【讨论】：

【解决方案3】：

在上面的 Khatri 示例中，您可以在三元组中返回一个数组。我需要显示嵌套的 ul > li's 并且该添加适合我的问题。

function renderData(data) {
 return data.map(item => {
  return React.createElement(
   item.tag,
   { style: item.style },
   item.children ? [item.text, renderData(item.children)] : item.text
  );
 });
}

function App() {
 return <div className="App">{renderData(data)}</div>;
}

【讨论】：