Javascript 如何呈现包含打开而非关闭标记的组件？React.js

我的目标是制作一个组件，它用嵌套的ul标签呈现卡片，如下所示： 从这样的数据来看，这些数据是通过家长组件的道具传递下来的：

为此，我在嵌套ul应该开始的行的末尾设置了标记，例如“：”嵌套ul应该打开的时间和“.”嵌套ul应该关闭的时间。但是为了使这段代码正常工作，我需要呈现打开的标记，而不是关闭的标记

let inUl = false;
<div className="cardBody">
        {props.body.map((el, index) => {
          if(el.endsWith(":")){
            inUl = true;
            return <li>{el}<ul>
          } else if(inUl && el.endsWith('.')){
            inUl = false;
            return <li>{el}</li></ul>
          } else {
            return <li>{el}</li>
          }
        })}
  </div>

设inUl=false；
{props.body.map（（el，index）=>{
if（标高尾端（“：”）{
inUl=真；
返回
{el}

}else if（inUl&el.endsWith（'.'））{
inUl=假；
返回
{el}
}否则{
返回
{el}
}
})}

任何帮助都会得到极大的感谢，我的截止日期已经很近了，现在我真的被困在了项目的最后一部分——这个

但是为了使这段代码工作，我需要呈现打开的标记，而不是关闭的标记

这是对React如何工作的根本误解。您可以在源代码中使用标记来定义元素，这些元素是对象。没有结束标记时不能有开始标记，正如没有结束标记时不能有对象初始值设定项的开始标记一样

相反，您有一个传递给的组件，它呈现其组件中的子组件。例如：

const UnorderedList = props => <ul>{props.children}</ul>;

---

你不应该用打开或关闭的标签来思考

为了获得您的结果，在将数据重新组织到易于呈现的数据结构中之前，我将：

const elements = [
    "first ul:",
    "first li",
    "second li",
    "third li.",
    "second ul:",
    "first li",
    "second li",
    "third li.",
    "third ul:",
    "first li",
    "second li",
    "third li."
]

const makeUls = elements => {
    const uls = {}
    let currentUl
    elements.forEach(element => {
        if ( element.endsWith(":") ) {
            uls[element] = []
            currentUl = element
        } else {
            uls[currentUl].push(element)
        }
    })
    return uls
}

Object {
    "first ul:": ["first li", "second li", "third li."],
    "second ul:": ["first li", "second li", "third li."],
    "third ul:": ["first li", "second li", "third li."]
}

调用

makeUls

并给出平面数组，您应该有如下映射：

const elements = [
    "first ul:",
    "first li",
    "second li",
    "third li.",
    "second ul:",
    "first li",
    "second li",
    "third li.",
    "third ul:",
    "first li",
    "second li",
    "third li."
]

const makeUls = elements => {
    const uls = {}
    let currentUl
    elements.forEach(element => {
        if ( element.endsWith(":") ) {
            uls[element] = []
            currentUl = element
        } else {
            uls[currentUl].push(element)
        }
    })
    return uls
}

Object {
    "first ul:": ["first li", "second li", "third li."],
    "second ul:": ["first li", "second li", "third li."],
    "third ul:": ["first li", "second li", "third li."]
}

一旦有了这种结构，就可以轻松地正确渲染所有内容：

render() {
    const uls = makeUls(props.body)
    Object.keys(uls).map(ul => (
        <ul>
            { uls[ul].map(li => <li>{ li }</li> }
        </ul>
    ))
}

render（）{
const-uls=makeUls（推进器体）
Object.keys（uls.map）（ul=>(

{uls[ul].map（li=>
{li}
}

))
}

---

考虑正确添加

键

属性和所有内容。

欢迎使用堆栈溢出！请环顾四周，阅读，特别是作为文本的Post code、标记、数据字符串和其他文本，而不是作为文本的图片。原因：1.我没有看到任何

：

或

，可以解释您正在使用的数据中的代码向我们展示，所以不容易看出解决方案是什么，但据我所知@0xc14m1z的答案听起来不错。事实是：React和HTML中都没有任何打开的标记。如果你真的想到打开的标记，你可能在数据解析的方式上犯了错误。也许你是对的，也许我选择了“打开/关闭"标记选项，因为找不到初始数据组织的好方法。目前正在使用@0xc14m1z的应答变量进行尝试。虽然代码没有任何分号，但有点难以阅读。我考虑过此选项，但不理解

…

和位于中的渲染函数之间的区别本机ul标记？

data.map（el=>
• {el}
）

@Sth-上面没有。这只是一个使用

子类的演示。先生，你能给我一个关于如何实现这种列表的建议吗。我已经试了5个小时了，已经尝试了很多不同的选项，甚至有一个结果变量，然后在每次迭代中添加新的列表项，但仍然没有退出。你似乎很有经验，如果你帮助了我，我无法表达我的感激之情，谢谢。这段代码完全不适用于我的数据结构，但我想我明白了这个想法，尽管我希望在实现方面得到一点帮助：）