Question

我对React还是很陌生，并且对Web开发整体没有很丰富的经验。我正在尝试使用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'));

我要格式化的数据示例：

   [
         {
             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

理论上，您可以执行以下操作：

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>

        );
    });

希望您能明白。

Answer 2

我试图使HTML与您的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 3

非常感谢您，该应用现在可以使用了。

正如您所提出的，我只是替换了这一行：

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

与

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

，它按计划工作。

我认为我曾经有几次接近，但是只是格式不正确。

使用React在列表中呈现列表

3 个答案: