0

鉴于数据源是多种数据类型，我是 React 和 JSX 的新手，并且坚持如何呈现项目列表。

我的数据源（棱镜）返回一个数据数组，所有不同的类型，每个代表一个 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;
4

2 回答 2

1

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

相反，当你遇到应该是 的东西时<li>，开始将它们推入一个数组。当你遇到下一个非项目时，将你所有的s<li>包裹在一个or中，然后将它推入你的.<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 您应该使用forEachnot map，因为您严格地迭代数组而不是实际将其映射到新数组中。if-else也将比switchIMO 好一点，因为它有助于避免像现在这样重复您的代码。

于 2017-11-07T23:30:14.753 回答
0

如果您正在运行自己的后端，我会让您自己的宁静端点到达数据，您可以按照您想要的方式转换/解析，然后让您的前端接触您的节点/我们正在运行的后端以获得更好的结构化数据。我不知道这是否适合您的情况，但是每当我需要一个 api 给我信息并且它返回令人讨厌时，我会与我的后端团队交谈并像 cmon 人一样，或者您可以使用您的节点自己解析它/我们服务器。

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

其他玩前端Q_Q解析的数据...

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

如果其他人有更好的解决方案很想了解更多！~ :)

于 2017-11-07T23:22:30.690 回答