如何在post（）后重新加载spfx web部分？-Java 学习之路

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

2 回答

1

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

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

回复于 2024-04-29T17:26:39+08:00

你应该使用这种方法：

componentDidMount（）
componentDidUpdate（prevProps，prevState，snapshot）
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）=> 重新启动事件并更改状态，并且在渲染方法中我有： . 您可以在类CenterPanel中看到更改prop事件的event = .
在中心面板中，public componentWillReceiveProps（nextProps）调用事件并使用状态进行渲染 .

回复于 2024-04-29T17:26:39+08:00

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

2 回答

相关问题