Javascript 是否有人在不使用SharePoint Framework的情况下将React或TypeScript或两者都用于SharePoint？

如果是这样，您的部署/devops过程是什么样子的

谢谢

其他信息：

---

SharePoint版本：2016内部部署

我们可以在脚本编辑器web部件中使用下面的代码来显示列表项

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

变量divStyle={
显示：“无”
};
变量divStyle1={
显示：“黑色”
};
类ReactSP扩展React.Component{
调试器；
构造函数（）{
超级（）；
此.state={
项目：[
{
“名称”：“名称”，
“柱的描述”：
} 
],
翻转：空
};
}
mouseOut（）{
console.log（“鼠标退出！！！”；
this.setState（{flipped:false}）；
} 
mouseOver（）{
log（“鼠标悬停！！！”；
this.setState（{flipped:true}）；
}
componentDidMount（）{
调试器；
此参数为.RetrieveSPData（）；
}
RetrieveSPData（）{
var reactHandler=this；
var spRequest=新的XMLHttpRequest（）；
spRequest.open（'GET'，”http://sp2016/_api/web/lists/getbytitle（'TestList'）/items“，true）；
setRequestHeader（“接受”、“应用程序/json”）；
spRequest.onreadystatechange=函数（）{
如果（spRequest.readyState==4&&spRequest.status==200）{
var result=JSON.parse（spRequest.responseText）；
reactHandler.setState（{
项目：结果值
});
} 
如果（spRequest.readyState==4&&spRequest.status！==200）{
console.log（'发生错误！'）；
} 
}; 
spRequest.send（）；
}
render（）{
调试器；
返回（





演示：使用SPFx、REST API和React JS检索SharePoint列表项



身份证件
{
this.state.items.map（函数（项，键）{
返回（this.mouseOut（）}onMouseCenter={（）=>this.mouseOver（）}>列名{item.Title}说明{item.DEscription_x0020_of_x0020_Column}）；
})
} 
); 
}
} 
ReactDOM.render（，document.getElementById（'CarSalesData'）；

参考：