Кто-нибудь когда-либо использовал React или TypeScript или оба вместе с SharePoint без использования SharePoint Framework?

Question

Если это так, как выглядит процесс развертывания / разработки?

Спасибо

Дополнительная информация:

Версия SharePoint: 2016 в помещении

Answer 1

Мы можем использовать приведенный ниже код в веб-части редактора сценариев для отображения элементов списка.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script> 
<div id="CarSalesData"></div>
<script type="text/babel">
var divStyle = {
    display: "none"
};
var divStyle1 = {
    display: "black"
};
class ReactSP extends React.Component{ 
    debugger;
    constructor(){ 
        super(); 
        this.state = {
            items: [ 
              {
                "Title":"",
                "Description_x0020_of_x0020_colum":""
              } 
            ],
            flipped: null
        };
    }
    mouseOut() {
        console.log("Mouse out!!!");
        this.setState({flipped: false});
    } 
    mouseOver() {
        console.log("Mouse over!!!");
        this.setState({flipped: true});
    }
    componentDidMount() { 
        debugger;
        this.RetrieveSPData(); 
    }
    RetrieveSPData(){ 
        var reactHandler = this; 
        var spRequest = new XMLHttpRequest(); 
        spRequest.open('GET', "http://sp2016/_api/web/lists/getbytitle('TestList')/items",true); 
        spRequest.setRequestHeader("Accept","application/json");
        spRequest.onreadystatechange = function(){ 
          if (spRequest.readyState === 4 && spRequest.status === 200){ 
              var result = JSON.parse(spRequest.responseText); 
              reactHandler.setState({  
                  items: result.value
              });
          } 
          else if (spRequest.readyState === 4 && spRequest.status !== 200){ 
              console.log('Error Occured !'); 
          } 
        }; 
        spRequest.send(); 
    }
    render(){
        debugger;
        return (<div><br></br>
            <br></br>
            <div> Demo : Retrieve SharePoint List Items using SPFx , REST API& React JS </div>
            <br></br>
            <div> ID</div>
            {
                this.state.items.map(function(item,key){
                    return (<div key={key}><div onMouseLeave={() => this.mouseOut()} onMouseEnter={() => this.mouseOver()}>Column Name{item.Title}</div><div className={divStyle}>DEscription{item.Description_x0020_of_x0020_colum}</div></div>);
                })
            } 
            </div>
        ); 
    }
} 
ReactDOM.render(<ReactSP />, document.getElementById('CarSalesData')); 
</script>

Ссылка : Извлечение данных списка SharePoint с использованием API REST и отображение с использованием контента Веб-часть редактора