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，因此您实际上为 ul中的每个项目创建了一个this.state.items。 / p>

相反，您应该将每个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在取消排序列表中显示共享点列表项

1 个答案: