Question

我是React和JSX的新手，并坚持如何渲染项目列表，因为数据源是多种数据类型。

我的数据源（prismic）返回所有不同类型的数据数组，每个数据代表一个html标记例如。来自服务器的数据是：

heading3 (h3)  
paragraph (p)  
list-item (li for ul)  
list-item (li for ul)  
list-item (li for ul)  
paragraph (p)  
o-list-item (li for ol)  
o-list-item (li for ol)  
paragraph (p)

我想将此转换为有效的HTML，插入返回的数据。

E.g. heading3 will render <h3>heading_text</h3>

数据不包含列表的开始和结束标记的条目，因此我需要在列表开始和结束时插入它们。

我的第一次尝试是做这样的事情：

    renderSectionText(alltextdata) {
    let texthtml = [];
    let listopen = false;
    alltextdata.map((text, index) => {
        switch (text.type) {
            case "heading3":
               //if a ul/ol started, end one (insert a closing ul/ol tag)
               if(listopen){
                    texthtml.push(</ul>)
                    listopen = false;
               }
                texthtml.push(<h3 key={index}>{text.text}</h3>);
                break;
            case "paragraph":
                if(listopen){
                    texthtml.push(</ul>)
                    listopen = false;
                }
                //if a ul/ol started, end one (insert a closing ul/ol tag)
                texthtml.push(<p key={index}>{text.text}</p>);
                break;
            case "list-item":
                //if no ul/ol started, start one (insert an opening ul/ol tag)
                if(listopen === false){
                    texthtml.push(<ul>)
                    listopen = true;
                }
                texthtml.push(<li key={index}>{text.text}</li>);
                break;

            default:
                console.log(text.type);
                return;
          }
    })
    return texthtml;
}

但是，在React（AFAIK）中无法输入没有结束标签的标签。即这给了我一个JSX语法错误

            case "list-item":
                //if no ul/ol started, start one 
                if(listopen === false){
                   texthtml.push(<ul>);   //error here                       
                   listopen = true;
                }
                texthtml.push(<li key={index}>{text.text}</li>);
                break;

Answer 1

你是对的，React和JSX根本不这样做。创建HTML节点时，需要包含结束标记或自行关闭。

相反，当您遇到应该是<li>的内容时，请开始将它们推入数组中。当您遇到下一个非<li>项时，请将所有<li>包裹在<ol>或<ul>中，然后按进入texthtml。

一些伪代码：

let texthtml = [];
let listItems = [];
alltextdata.forEach((ea, i) => {
  if(ea.type === "list-item"){
    listItems.push(<li key={i} >{ea.text}</li>);
  } else {
    if(listItems.length > 0){
      texthtml.push(<ul key={i} >{listItems}</ul>);
      listItems = [];
    }
    // Continue with process other non-list-items here...
  }
})

Pssst你应该使用forEach而不是map，因为你严格地在数组上进行迭代而不是实际将它映射到新数组中。 if-else也会比switch IMO好一点，因为它有助于避免像现在一样重复代码。

Answer 2

如果您正在运行自己的后端，我会让您自己的restful端点到达数据，您可以转换/解析您想要的方式然后让您的前端触摸您的节点/我们后端您正在运行以获得更好的结果结构化数据。我不知道这是否适合你的情况，但每当我不得不给api给我信息，它回来讨厌我会跟我的后端团队说话，就像cmon家伙或你可以自己使用你的节点解析它/我们服务器

从它的声音中你需要构建一些更具延展性或可用性的东西我绝对建议在其他服务中进行解析。

其他人对前端Q_Q ...

上正在解析的数据感到高兴

祝你好运我希望这会有所帮助，看起来你的数据是否正确地返回给你并将其加载到dom中似乎会有很多反复试验的错误：）

如果其他人有更好的解决方案，我们希望了解更多信息！〜：）

当列表数据部分较大的数据集时，如何呈现列表

2 个答案: