Je suis très très nouveau sur React et je n'ai pas beaucoup d'expérience dans le développement Web dans son ensemble. J'essaye d'utiliser React pour générer une liste dans une liste. J'ai scanné de nombreux articles et lu de nombreux documents, mais je ne trouve rien qui m'indique dans la bonne direction.

La fonctionnalité de base de mon application est d'afficher une liste de titres de documents, et pour chaque titre, un certain nombre de paragraphes qui correspondent à une chaîne de recherche d'entrée. Le texte dans les paragraphes qui correspond à la chaîne de recherche est mis en surbrillance.

Jusqu'à présent, j'ai réussi à rendre le titre et tous les paragraphes en un seul élément, mais je ne vois pas comment décomposer les paragraphes en une liste séparée sous le titre.

Je sais que mon style de code existant est un peu vieillot, mais il est basé sur les tutoriels que j'ai suivis. Je suis également conscient que l'utilisation de "dangerouslySetInnerHTML" est mal vue, mais pour le moment, cela fonctionne.

Toute aide ou pointeurs serait grandement apprécié. Vous trouverez ci-dessous mon code, un exemple des données que j'essaie de mettre en forme et un exemple de la sortie requise.

Merci beaucoup.

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'));

Un exemple des données que j'essaie de formater:

   [
         {
             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"
             ]
         }
    ]

La mise en page souhaitée serait:

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"
1
Bob Dobson 20 nov. 2018 à 14:06

3 réponses

Meilleure réponse

En théorie, vous pouvez faire ce qui suit:

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>

        );
    });

J'espère que vous comprenez l'idée.

0
vitomadio 20 nov. 2018 à 11:31

J'ai essayé de rendre le HTML aussi similaire que possible au vôtre, même s'il peut être beaucoup mieux écrit. Cela résout votre problème sans vous distraire avec le reste.

Vous devez vous occuper des touches, essayer d'utiliser les fonctions fléchées dans les cartes, déstructurer le document, etc ...

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>
    )
  })
}
0
Stjepan Golemac 20 nov. 2018 à 11:41

Merci beaucoup, l'application fonctionne maintenant.

Comme vous l'avez suggéré, je viens de remplacer la ligne:

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

Avec

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

Et cela a fonctionné comme prévu.

Je pense que j'ai été proche de cela à quelques reprises, mais je n'avais tout simplement pas le bon format.

0
Bob Dobson 20 nov. 2018 à 12:14