如何呈现包含打开但未关闭标签的组件？ React.js

Question

我有一个 objective 来制作一个组件，它呈现带有嵌套 ul 标签的卡片，如下所示：从这样的数据中，它是通过父组件的道具传递下来的：

为此，我在嵌套 ul 应该开始的行的末尾设置了标记，例如":" 当嵌套的 ul 应该打开和 "."嵌套的 ul 应该关闭的时间。但是为了使这段代码工作，我需要呈现 opened，但不是 closed 标签。

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>

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

Answer 1

But to make this code work, I need to render opened, but not closed tags.

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

的对象初始值设定项的开始 {

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

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

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

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

Answer 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 属性和所有内容。

如何呈现包含打开但未关闭标签的组件？ React.js

How to render a component, that contains an opened and not closed tag? React.js

html

javascript

reactjs

conditional-rendering