Использование React для рендеринга списка в списке

Question

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

Основная функция моего приложения заключается в отображении списка заголовков документов, а для каждого заголовка - количества абзацев, которые соответствуют строке входного поиска.Текст в абзацах, соответствующий строке поиска, подсвечивается.

До сих пор мне удалось отобразить заголовок и все абзацы в одном элементе, но я не понимаю, как разбить абзацы на отдельный список.под заголовком.

Я знаю, что мой существующий стиль кода немного устарел, но он основан на учебных пособиях, которым я следовал.Я также знаю, что использование «dangerouslySetInnerHTML» неодобрительно, но на данный момент это работает.

Любая помощь или указатели будут с благодарностью.Ниже приведены мой код, пример данных, которые я пытаюсь отформатировать, и пример требуемого вывода.

Большое спасибо.

class FoundDoc extends React.Component {
    state = {
        doclist: []
    };

    render() {
        var doclist = this.state.doclist; 
        doclist = doclist.map(function(data){
            return(
                <ul id="doc-details" key={data.title}>
                    <li id="doc-title">{data.title}</li>
                    <ul id="paragraphs" key={data.passages.length}>
                        <li dangerouslySetInnerHTML={{__html: data.passages}} />
                    </ul>
                </ul>

            );
        });
        return(
            <div id="doc-details">
                <form id="search" onSubmit={this.handleSubmit}>
                    <label>Enter Search String:</label>
                    <input type="text" ref="srch" placeholder="Search String" required />
                    <button type="submit">Search</button>
                </form>
                <ul>{doclist}</ul>
            </div>
        );
    }

    handleSubmit = (e) => {
        e.preventDefault();
        var srch = this.refs.srch.value;

        fetch('/api/doclist?srch=' + srch).then(function(data){
            return data.json();
        }).then( json => {
            this.setState({
                doclist: json
            });
        });
    };
}

ReactDOM.render(<FoundDoc />, document.getElementById('doclist'));

Пример данных, которые я 'm пытается отформатировать:

   [
         {
             title: "Document Title 1",
             paragraphs: [
                 "<em>String</em> 1 found in document",
                 "<em>String</em> 2 found in document"
             ]
         },
         {
             title: "Document Title 2",
             paragraphs: [
                        "<em>String</em> 1 found in document",
                        "<em>String</em> 2 found in document",
                        "<em>String</em> 3 found in document",
                        "<em>String</em> 4 found in document"
             ]
         },
         {
             title: "Document Title 3",
             paragraphs: [
                        "<em>String</em> 1 found in document",
                        "<em>String</em> 2 found in document",
                        "<em>String</em> 3 found in document"
             ]
         }
    ]

Желаемый макет будет:

Document Title 1
    a "String 1 found in document",
    b "String 2 found in document"

Document Title 2
    a "String 1 found in document",
    b "String 2 found in document"
    c "String 3 found in document"
    d "String 4 found in document"


Document Title 3
    a "String 1 found in document",
    b "String 2 found in document"
    c "String 3 found in document"

Answer 1

Я пытался сделать HTML как можно более похожим на ваш, хотя он может быть написан намного лучше.Это решит вашу проблему, не отвлекая вас на все остальное.

Вам нужно позаботиться о клавишах, попробовать использовать функции стрелок на картах, уничтожить документ и т. Д. ...

render() {
  const docs = this.state.docs

  return docs.map(function(doc) {
    return (
      <ul id="doc-details" key={doc.title}>
        <li id="doc-title">{doc.title}</li>
        <li>
          <ul id="paragraphs">
            {doc.passages.map(function (passage) {
              return (
                <li dangerouslySetInnerHTML={{__html: passage}} />
              )
            })}
          </ul>
        </li>
      </ul>
    )
  })
}

Answer 2

Спасибо всем большое, приложение теперь работает.

Как вы и предлагали, я просто заменил строку:

<li dangerouslySetInnerHTML={{__html: data.passages}} /> 

на

 {data.passages.map(function (passage) {
       return (
            <li dangerouslySetInnerHTML={{__html: passage}} />

и все заработало, как и планировалось.

Я думаю, что несколько раз был близок к этому, но просто не получил правильный формат.

Answer 3

Теоретически вы можете сделать следующее:

var doclist = this.state.doclist; 
    doclist = doclist.map(function(data){
        return(
            <ul id="doc-details" key={data.title}>
                <li id="doc-title">{data.title}</li>
                <ul id="paragraphs">
                {data.passages.map((passage, i) => { //map your passages here.
                    <li key={i}><p>{passage}<p/></li>
                }
                </ul>
            </ul>

        );
    });

Надеюсь, вы поняли идею.