Как отобразить компонент, который содержит открытый и не закрытый тег?React.js

Question

У меня есть цель создать компонент, который будет рендерить карты с вложенными тегами 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>

Любая помощь будет принята с благодарностью, у меня близкий срок, и прямо сейчасЯ буквально застрял в последней части проекта - это.

Answer 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 и все.

Answer 2

Но чтобы этот код работал, мне нужно отображать открытые, но не закрытые теги.

Это фундаментальное недопонимание того, как работает React.Вы используете теги в исходном коде для определения элементов, которые являются объектами .У вас не может быть открывающего тега без закрывающего тега, так же как у вас не может быть открывающего { для инициализатора объекта без закрывающего }.

Вместо этого у вас есть компонент, который вы передаете children to, и он отображает дочерние элементы в своем компоненте.Например:

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

... который используется следующим образом (т.е. где-то в render):

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