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

Question

我的目标是制作一个组件，它使用嵌套的 ul 标签渲染卡片，如下所示: 从这样的数据中，它是通过父组件的 Prop 传递下来的:

为此，我在嵌套 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>

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

Answer 1

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

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

相反，您有一个通过 children 的组件到，并在其组件内呈现子项。例如:

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

...像这样使用(即在某处的render中):

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