SharePoint开发 -使用react框架

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

写在前面发句牢骚:别人可以轻而易举的追上你的努力, 这世界人与人的差距,真的太大了.

生成SharePoint react项目

安装环境请参考:juejin.cn/post/700618… 创建一个 webpart 在最后请选择react项目,很简单略过不谈

观察一下生成的项目

对于我们来讲,只需要关注的是图上显示的tsx文件和下方的xxxxWebpart.ts 文件. tsx这个文件其实就是用Typescript写的Jsx. 然后在另一个文件写JS代码.

很好当我们有了这些基础的认识之后咱们就可以上手去做了

动手吧

看了两天React 稍微的了解到了React都是一个一个组件相连的,按照我的理解就是,它是一个圣诞树,上面挂满了礼物袜子,而圣诞树就是它页面上的 <div id = "root"></div> ,它的礼物袜子就是组件,很明显咱们的项目已经

创建组件

另起一个文件夹,创建组件

import * as React from "react";
import { DemoACEsProps } from "./DemoACEsProps";
import { DemoACEsState } from "./DemoACEsState";
import {
    SPHttpClient,
    SPHttpClientResponse,
    ISPHttpClientOptions,
} from "@microsoft/sp-http";

export class DemoACE extends React.Component<DemoACEsProps, DemoACEsState>{
    constructor(props: DemoACEsProps, state: DemoACEsState){
        super(props);
        this.state ={
            items:[]
        }; 
    }
    ```

就像这样创建组件 不要忘记你的render()方法,好了如上所述,我的组件名字叫DemoAce, 然后把这个组件挂到圣诞树上就好了,让我们返回项目自己创建的xxxx.tsx 文件,放上咱们的组件

挂上组件

好了这样返回最开始那个.tsx文件,找到render去添加咱们的组件, 写上咱们组件的名字<DemoACE context={this.props.context}></DemoACE> 这样在页面就能显示咱们刚刚做好的组件了,注意一定不要忘记他的语法是要闭合的,很坑人的.

以前写的那些不太符合SharePoint的webpart开发流程,你要给他分开,你不分着写,就体现不出来人家框架的优势了. 工作还是很好做的,但是我的水平太差了,努力学习