Question

我有一个目标来制造一个组件，该组件可以渲染带有嵌套ul标签的卡片，如下所示： needed 从像这样的数据，这是通过父母组件的道具传下来的： data

为此，我在嵌套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如何工作的根本误解。您可以在源代码中使用标签来定义元素，即 objects 。对于没有结束符{的对象初始值设定项，您不能有没有结束标签的开始标签。

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

...的用法是这样的（即在const UnorderedList = props => <ul>{props.children}</ul>;中的某个地方）：

render

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

2 个答案: