UseContext提供程序在Office JS加载项中不起作用

问题描述

我正在尝试使用React和TypeScript为excel开发插件。我有以下应用程序返回语句：

export default  class App extends React.Component<AppProps,FeedBackMessages> {

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

  render() {
    const { title,isOfficeInitialized } = this.props;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/Boxes32x32.png" message="Please sideload your addin to see app body." />
      );
    }
    
    return (
      <Stack>
      {/* this context provider is needed to share the context hook for Feedback messages */}
      <FeedbackProvider>
      <Stack.Item align="center">
        <h2> Profile generator</h2>
      </Stack.Item>
       </FeedbackProvider>
      </Stack>
    );
  }
}

反馈提供者如下：

export interface IProviderProps {
  children?:any;
 
}
//create the object for the message state 
type MessageContextState = {
 message: string; 
 messageType: string; 
 mVisible:boolean;
/*  onConfirm?: () => void,onCancel?: () => void */
}
//object to define the message and setMessage
const messageContextValue = {
 fbMessage: {message: "Message from the context",messageType: "default",mVisible: false},setFbMessage: (fbMessage: MessageContextState)=>{ }
};

export interface FeedBackMessages {
 message: string,messageType: string,mVisible : boolean
} 
 //this is initializing the context with default values
export const FeedbackContext = React.createContext(messageContextValue);

//this replaces FeedbackContext.Provider in the app
export const FeedbackProvider = (props:IProviderProps)=>{
 const [fbMessage,setFbMessage] = useState(messageContextValue.fbMessage);
  return(
  <FeedbackContext.Provider value ={{ fbMessage,setFbMessage}}>
    {props.children}
  </FeedbackContext.Provider>
  )


}

上面的代码段是在this发布的帮助下制作的，它可以与Chrome或Firefox中的CRA样板配合使用。但是，当我在Excel中横向加载应用程序时，它将返回空白页。如果删除FeedbackProvider，我将获得内容。我不知道在哪里看。任何帮助是极大的赞赏。提前表示感谢

解决方法

尽管我不清楚为什么会起作用，但我找到了解决问题的方法。我首先尝试使所有Polyfills与Core-js一起使用。因为显然它与IE无法理解EC6有关。但无济于事。无论我尝试了什么，它都没有用。所以我要做的是重新编写了上下文提供程序，以便它不初始化值。现在错误消失了，它可以正常工作：

enter   //when using the modern React call,the taskpane app will flinch. so it has to be the old dated call.
    import * as React from 'react'
    //import React from "react";
    import {useState,Dispatch} from "react";

    //this context has the job to provide feedback messages to all components who might need them. 23 august 2020

    export interface IProviderProps {
      children?:any;
     
    }
    //create the object for the message state 
    type MessageContextState = {
     message: string; 
     messageType: string; 
     mVisible:boolean;
    }
    //object to define the message and setMessage
    type messageContextValue = {
      fbMessage: MessageContextState;
      setFbMessage: Dispatch<React.SetStateAction<MessageContextState>>;
    };

    export interface FeedBackMessages {
     message: string,messageType: string,mVisible : boolean
    } 
     //this is initializing the context with default values
    export const FeedbackContext = React.createContext<messageContextValue | undefined> (undefined);


    //this replaces FeedbackContext.Provider in the app
    export const FeedbackProvider = (props:IProviderProps)=>{
     const [fbMessage,setFbMessage] = useState({message:"Blaat",messageType:"default",mVisible:false});
      return(
      <FeedbackContext.Provider value ={{ fbMessage,setFbMessage}}>
        {props.children}
      </FeedbackContext.Provider>
      )


    } 

但是我仍然不明白为什么它在浏览器中而不是Excel加载项中可以在Chrome上运行？