【发布时间】：2023-03-10 07:28:01
【问题描述】：
我正在尝试使用 SPFX Web 部件来实现这一点：-
-
Web 部件将呈现一个 Button 并在其设置中包含一个文本字段。
-
用户添加 Web 部件 >> 编辑它 >> 在文本字段内（设置页面内）输入文本 >> 保存 Web 部件 >> 然后 Web 部件将呈现一个按钮 >> 如果用户单击在按钮上将显示一个弹出窗口，其中包含输入的文本。
现在我找到了这个链接@https://www.c-sharpcorner.com/article/conecpt-of-react-portal-in-spfx/，它几乎可以实现我想要的，除了示例中的弹出文本是在.tsx 文件中硬编码的。那么制作的步骤是什么弹出文本可在 Web 部件设置中配置，而不是硬编码？
谢谢
这是我的ReactPortalWebPart.ts 文件：-
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'ReactPortalWebPartStrings';
import ReactPortal from './components/ReactPortal';
import { IReactPortalProps } from './components/IReactPortalProps';
export interface IReactPortalWebPartProps {
description: string;
}
export default class ReactPortalWebPart extends BaseClientSideWebPart<IReactPortalWebPartProps> {
public render(): void {
const element: React.ReactElement<IReactPortalProps> = React.createElement(
ReactPortal,
{
description: this.properties.description
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
这里是ReactPortal.tsx:-
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 >
<Myportal/>
</div>
);
}
}
这里是Myportal.tsx:-
import* as React from "react";
import usePortal from "react-cool-portal";
import "./mystyle.scss";
const Myportal = () => {
// const { Portal } = usePortal({ containerId: "my-portal-root" });
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">
Who we are
</button>
<button className="btn" onClick={show} type="button">
Our value
</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">
<h1> Who we are</h1>
<h3>.................................................</h3>
Our overriding purpose is to dramatically improve the reliability, efficiency........
</div>
</div>
</div>
</Portal>
</div>
);
};
export default Myportal;
【问题讨论】：
-
这里不清楚你的意思。如果您希望对话框访问存储在 Web 部件属性中的文本，为什么不将它从您的 Web 部件传递给您的对话框？？
-
@Nikolay 是的，我想在 Web 部件设置中添加所需的 HTML ...然后当 Web 部件呈现按钮并且用户单击按钮以显示 HTML ...我知道我的要求听起来很简单..但我不确定我该怎么做？谢谢
-
@Nikolay 你能检查我的编辑吗.. 我提供了我的 SPFX 的代码.. 谢谢
-
嗯，你为什么要使用传送门？！您不能在没有任何门户的情况下简单地呈现您的 Web 部件吗？我的意思是，将“描述”传递给要呈现它的组件（这里称为“MyPortal”并且没有任何属性。您需要将描述传递给该组件）。也许这会有所帮助：React 中的组件和属性是什么：reactjs.org/docs/components-and-props.html
-
@Nikolay 我正在关注此链接@c-sharpcorner.com/article/conecpt-of-react-portal-in-spfx 以显示弹出窗口.. 谢谢.. 你能就此提供更多建议吗？
标签： javascript reactjs sharepoint spfx