3

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

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

4

2 回答 2

4

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

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

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

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

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

return <UnorderedList><li>...</li><li>...</li></UnorderedList>;
于 2018-10-15T07:14:51.517 回答
1

你不应该考虑开放或封闭的标签......

为了达到您的结果，我会在将数据重新组织到可以轻松呈现的数据结构中之前，如下所示：

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

于 2018-10-15T07:36:22.610 回答