使用 spfx 在 unorderlist 列表中显示共享点列表项

Question

我正在尝试在 UL 中插入共享点列表项。现在每个项目都添加到单独的 UL 中。请帮助如何在一个 UL 中迭代和添加所有共享点列表项。

public componentDidMount(){ 
      if(this.props.Dropdownprop != undefined){
      }
      alert("second" + this.props.Dropdownprop);
        var reactHandler = this; 
        $.ajax({ 
            url: "https://sharepointprod.sharepoint.com/teams/SharepointPOC/_api/lists(guid'"+this.props.Dropdownprop+"')/items", 
            type: "GET", 
            headers:{'Accept': 'application/json; odata=verbose;'}, 
            success: function(resultData) {          
              reactHandler.setState({ 
                items: resultData.d.results,
              }); 
            }, 
            error : function(jqXHR, textStatus, errorThrown) { 
            } 
        }); 
      }
      public render(): React.ReactElement<IScrollTickerWebPartProps> {
        return ( 
           <div>
                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.marquee} key={key}> 
                   <span>
                       <div>
                       <ul className={styles.jsnews}>
                       <li>{item.Title}</li>
                       </ul>
                       </div> 
                       </span>
                     </div>); 
                 })}                    
             </div> 
       ); 
     }

Answer 1

在您的 render 方法中检查这部分代码：

                 {this.state.items.map(function(item,key){     
                   return (<div className={styles.marquee} key={key}> 
                   <span>
                       <div>
                       <ul className={styles.jsnews}>
                       <li>{item.Title}</li>
                       </ul>
                       </div> 
                       </span>
                     </div>); 
                 })}

您正在使用 map 将每个 this.state.items 变成一个 div className={styles.marquee}。由于这些 div 中的每一个都有一个 ul，您实际上是为 [=14= 中的每个个项目创建一个 ul ].

相反，您应该将每个 this.state.items 变成一个 li，并将其全部放入一个 ul。您仍然可以使用 map 执行此操作，但必须将其更深入地移动到 HTML 结构中。看这个例子：

<ul className={styles.jsnews}>
    {this.state.items.map(function(item,key){
        return (<li>{item.Title}</li>);
    }}
</ul>

使用 spfx 在 unorderlist 列表中显示共享点列表项

Display sharepoint list item in unorderlist list using spfx

reactjs

spfx