Question

我具有以下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>

Answer 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

Answer 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();

Answer 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>;
}

从对象的多层嵌套数组reactjs创建嵌套的JSX元素

3 个答案: