SPFX Web Part如何将弹窗文本改为Web Part设置项可配置

你只需要按下面步骤调整3个组件的属性传递逻辑，把Web Part配置面板的description字段值传递到弹窗组件即可： #

步骤1：确认组件参数接口定义 #

首先确认src/webparts/reactPortal/components/IReactPortalProps.ts文件中的接口已经包含需要透传的配置字段，参考内容如下：

export interface IReactPortalProps {
  description: string;
}

步骤2：修改ReactPortal.tsx透传配置参数 #

你当前的ReactPortal组件没有把拿到的配置值传给子组件Myportal，修改代码如下：

import * as React from 'react';  
import { IReactPortalProps } from './IReactPortalProps';  
import Myportal from "./Myportal";  

export default class ReactPortal extends React.Component<IReactPortalProps, {}> {  
  public render(): React.ReactElement<IReactPortalProps> {  
    return (  
      <div >
        {/* 把props里的description字段传给Myportal组件 */}
        <Myportal modalContent={this.props.description}/>  
      </div>  
    );  
  }  
}

步骤3：修改Myportal.tsx替换硬编码内容 #

给Myportal函数组件增加参数接收逻辑，把弹窗内的硬编码文本替换为传入的配置值，修改后代码如下：

import * as React from "react";  
import usePortal from "react-cool-portal";  
import "./mystyle.scss";  

// 定义组件接收的参数类型
interface IMyportalProps {
  modalContent: string;
}

const Myportal = ({ modalContent }: IMyportalProps) => {  
  const { Portal, show, hide } = usePortal({ defaultShow: false,containerId:"my-portal-root" });  
  const handleClickBackdrop = (e: React.MouseEvent) => {  
    const { id } = e.target as HTMLDivElement;  
    if (id === "modal") hide();  
  };  

  return (  
    <div className="App">  
      <button className="btn" onClick={show} type="button">  
        查看配置内容
      </button>  
      <Portal>  
        <div  
          id="modal"  
          className="modal"  
          onClick={handleClickBackdrop}  
          tabIndex={-1}  
        >  
          <div  
            className="modal-dialog"  
            role="dialog"  
            aria-labelledby="modal-label"  
            aria-modal="true"  
          >  
            <div className="modal-header">  
              <button  
                className="modal-close"  
                onClick={hide}  
                type="button"  
                aria-label="Close"  
              >  
                <span aria-hidden="true">×</span>  
              </button>  
            </div>  
            <div className="modal-body">  
              {/* 替换硬编码内容为传入的配置值 */}
              {modalContent}
            </div>  
          </div>  
        </div>  
      </Portal>  
    </div>  
  );  
};  
export default Myportal;

修改完成后重新编译部署，在Web Part编辑模式下的配置面板输入任意文本保存，点击按钮即可看到弹窗展示你输入的配置内容。如果需要多个按钮对应不同的配置内容，只需要在Web Part配置面板新增对应文本字段，按相同逻辑透传参数即可。

内容的提问来源于stack exchange，提问作者John John