如何渲染包含打开且未关闭标签的组件？React.js

Question

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

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

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

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

相反，您有一个将子级传递给的组件，并且它在其组件内呈现子级。例如：

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

...这样使用（即在render某个地方）：

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