当列出较大数据集的数据部分时如何在反应中呈现列表

Question

我是 React 和 JSX 的新手，在数据源是多种数据类型的情况下，我一直在研究如何呈现项目列表。

我的数据源（prismic）returns 一个数据数组，所有不同类型，每个代表一个 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

如果你是运行你自己的后端，我会让你自己的 restful 端点访问数据，你可以 transform/parse 你想要的方式然后让你的前端接触你的node/w.e 后端你运行获得了更好的结构化数据。我不知道这是否适合你的情况，但每当我不得不 api 给我信息，结果很糟糕时，我会和我的后端团队谈谈，就像 cmon 人一样，或者你可以自己解析它使用你的 node/w.e 服务器。

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

否则在前端解析数据时会很开心Q_Q...

祝你好运，我希望这对你有所帮助，而且似乎要经过大量的反复试验才能确定你是否将数据正确返回给你并将其加载到 dom:)

如果其他人有更好的解决方案，我很乐意了解更多信息！~ :)

Answer 2

你说得对，React 和 JSX 根本不是那样工作的。当您创建一个 HTML 节点时，它需要包含结束标记或自动关闭。

相反，当您遇到应该是 <li> 的内容时，开始将它们推入数组。当您遇到下一个非 <li> 项目时，将所有 <li> 包裹在 <ol> 或 <ul> 中，然后按 that 到你的 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 好一点，因为它有助于避免像现在这样重复代码。

当列出较大数据集的数据部分时如何在反应中呈现列表

How to render a list in react when list data part of larger data set

jsx

reactjs

prismic.io