使用 spfx 在 unorderlist 列表中显示 sharepoint 列表项答案

【问题标题】：Display sharepoint list item in unorderlist list using spfx使用 spfx 在 unorderlist 列表中显示 sharepoint 列表项
【发布时间】：2019-02-02 04:39:51
【问题描述】：

我正在尝试在 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> 
       ); 
     }

【问题讨论】：

标签： reactjs spfx

【解决方案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}。由于每个divs 中都有一个ul，因此您实际上是为this.state.items 中的每个项创建一个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>

【讨论】：

所以我正在努力处理
标签上的点击事件。如果我想根据被点击的列表项的 id 更新 UX，如何在返回语句中添加 onclick 事件，并传递项目的 id？

未经测试，但我通常会这样做：return (<li onClick={doSomething.bind(this, item.id)}>...</li>);。函数看起来像：var doSomething = function(itemId, ...otherArgs) { /* do whatever */ }。 bind 允许您传递任何其他参数 - 例如，在 React 代码范围内可用但不在 onClick 调用范围内的值。

这里是a very basic Pen，展示了bind的使用。