Как отобразить компонент, который содержит открытый и не закрытый тег? 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

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

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

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

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

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

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

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 атрибут и все.