Question

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

Answer 1

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

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

Answer 2

您应该使用以下方法：

componentDidMount（）
componentDidUpdate（prevProps，prevState，快照）
componentWillUnmount（）
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>
        );
    }
}

在此示例中，您可以看到：

左面板使用this.props.setEvent（'custom event'）从MainPanel发送事件。
在主面板中，私有getEvent =（event）=> {...}接收事件并更改状态，在render方法中，我有：。您可以在CenterCenter类中看到event = {this.state.event}更改prop事件。
在中央面板中，公共组件WillReceiveProps（nextProps）{....}接收事件并使用状态进行渲染。

如何在post（）后重新加载spfx web部分？

2 个答案: