如何呈现包含打开和未关闭标签的组件？反应.js

Posted 2023-02-22

【中文标题】如何呈现包含打开和未关闭标签的组件？反应.js

【英文标题】：How to render a component, that contains an opened and not closed tag? React.js

【发布时间】：2019-03-19 13:38:11

【问题描述】：

我的目标是制作一个组件，它使用嵌套的 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>

任何帮助都将不胜感激，我的截止日期很近，现在我真的被困在项目的最后一部分 - 这个。

【问题讨论】：

欢迎来到 Stack Overflow！请环顾四周，通读help center，尤其是How do I ask a good question? 邮政编码、标记、数据字符串和其他文本as text，而不是图片的文字。为什么：meta.***.com/q/285551/157247

1.我没有看到任何: 或. 在您向我们展示的数据中解释您的代码，因此很难看出解决方案是什么，但据我所知@0xc14m1z 的回答对我来说听起来不错。事实是：React 中没有任何打开的标签，html 中也没有。如果您真的考虑打开标签，那么您可能在您认为数据解析的方式上犯了错误。

可能你是对的，也许我选择了“打开/关闭”标签选项，因为找不到初始数据组织的好方法。现在尝试使用@0xc14m1z 的已回答变体。代码虽然没有分号，但读起来有点难。

【参考方案1】：

但要使这段代码正常工作，我需要渲染打开的标签，而不是关闭的标签。

这是对 React 工作原理的根本误解。您在源代码中使用标签来定义元素，它们是 objects。你不能有一个没有结束标签的开始标签，就像你不能有一个没有结束 的对象初始化器的开始 。

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

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

...这样使用（即，在某处的render）：

return <UnorderedList><li>...</li><li>...</li></UnorderedList>;

【讨论】：

我想过这个选项，但不明白 ... 和只是位于本机 ul 标签中的渲染功能？ data.map(el => el)

@Sth - 上面没有。这只是一个使用children的演示。

先生，您能给我一个关于如何实现这种列表的建议吗？我已经在第 5 个小时尝试这样做了，尝试了很多不同的选项，甚至有一个 result 变量，然后在每次迭代时都将新的 list-items 附加到它，仍然没有成功。你看起来很有经验，如果你帮助了我，我无法表达我的感激之情，谢谢。

【参考方案2】：

你不应该用开放或封闭标签来思考......

为了实现您的结果，我会在将数据重新组织成易于呈现的数据结构之前，如下所示：

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

调用makeUls 并给出平面数组，你应该有这样的地图：

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>
    ))

考虑正确添加key 属性和所有内容。

【讨论】：

这段代码完全不适用于我的数据结构，但我想我明白了，如果我能在实现方面提供一点帮助，我将不胜感激:)