post() 后如何重新加载 spfx Web 部件？

Question

我正在使用 React 框架创建 spfx webpart。 我有渲染所有控件的渲染方法。我有一个按钮，DOM 中有几个复选框，当用户单击按钮时，它将使用 post 方法 this.context.spHttpClient.post 将数据发送到 SharePoint。我能够将数据提交到 SharePoint。但是一旦我提交了数据，我就无法重新加载 spfx webpart。我必须在不重新加载页面的情况下再次重新加载 Web 部件。我试图再次调用渲染方法。当然它可能不是正确的方法，所以它不起作用。

Answer 1

您可以调用强制重新加载或设置状态，如 here 和 here 所示

"默认情况下，当你的组件的 state 或 props 发生变化时，你的组件会重新渲染。如果你的 render() 方法依赖于其他一些数据，你可以通过调用 forceUpdate() 告诉 React 组件需要重新渲染. 调用 forceUpdate() 将导致在组件上调用 render()，跳过 shouldComponentUpdate()。这将触发子组件的正常生命周期方法，包括每个子组件的 shouldComponentUpdate() 方法。如果标记发生变化，React 仍然只会更新 DOM。 通常你应该尽量避免使用 forceUpdate() 并且只在 render() 中读取 this.props 和 this.state。"

Answer 2

你应该使用这个方法：

1. componentDidMount()
2. componentDidUpdate(prevProps, prevState, 快照)
3. componentWillUnmount()
4. shouldComponentUpdate(nextProps, nextState)

更多信息在这里https://reactjs.org/docs/react-component.html。

例如，在一个项目中，我有一个按钮列表，然后我单击，所以我将事件发送到另一个使用该状态的组件：

LeftPanel.tsx：

import * as React from 'react';
import { Button } from 'react-bootstrap';
import { Event } from '../interfaces/Event';
import '../components/GruposDeColaboracion.module.scss';
import '../css/leftPanel.css';

export class LeftPanel extends React.Component {
    constructor(public props, public context) {
        super(props, context);
    }

    private getAllGroups = (e) => {
        this.clearState();
        this.setActive('allGroups');
        this.props.setEvent(Event.GET_ALL_GROUPS);
        //e.stopPropagation();
    }

    public render():JSX.Element{
            return (
                <div className="list-group">
                    <Button
                        id="allGroups"
                        onClick={this.getAllGroups}
                        className="list-group-item rounded-0 list-group-item-action btn btn-default active">
                        Todos
                    </Button>
                </div>
            );
    }
}

MainPanel.tsx：

import * as React from 'react';
import { LeftPanel } from '../views/LeftPanel';
import { CenterPanel } from '../views/CenterPanel';
import { IHomeState } from '../interfaces/IHomeState';

export class MainPanel extends React.Component<{}, IMainState> {

    constructor(public props, public context) {
        super(props, context);
        this.state = {
            event: null
        };
    }

    private getEvent = (event) => {
        this.setState({ event: event });
    }

    public shouldComponentUpdate(nextProps, nextState): boolean {
        if (this.state.event != nextState.event) {
            return true;
        }
        return false;
    }

    public render(): JSX.Element {
            return (
                <div className="row">
                    <div className="col-md-2" style={{ maxWidth: '250px' }}>
                        <LeftPanel setEvent={this.getEvent} />
                    </div>
                    <div className="col-md-10">
                        <CenterPanel event={this.state.event} context={this.props.context} />
                    </div>
                </div>
            );
        }
}

CenterPanel.tsx：

export class CenterPanel extends React.Component<{}, ICenterPanelState> {
    constructor(public props, public context) {
        super(props, context);
    }

  public componentWillMount() {

        this.state = {
            render: <Spinner />
        };
    }

  public componentWillReceiveProps(nextProps) {
    if (nextProps.event == Event.GET_ALL_GROUPS) {
      let dataForRender = 'Hello';
      this.setState({
        render: <ResponseHandler data = {dataForRender}/>
      });
    }
  }
    public render():JSX.Element{
        return(
        <div>
            {this.state.render}
        </div>
        );
    }
}

ResponseHandler.tsx：

import * as React from 'react';

export class ResponseHandler extends React.Component {

    constructor(public props, public context) {
        super(props, context);
    }

    public render():JSX.Element {

        return (
            <div>
                {this.props.data}
            </div>
        );
    }
}

在这个例子中你可以看到：

1. 左侧面板使用 this.props.setEvent('custom event') 从 MainPanel 发送事件。
2. 在主面板 private getEvent = (event) => {...} 接收事件并更改状态，在渲染方法中我有：.您可以在 CenterPanel 类中看到更改 prop 事件的 event={this.state.event}。
3. 在中心面板 public componentWillReceiveProps(nextProps) {....} 接收事件并使用状态进行渲染。