标准网格中的自定义控件答案

【问题标题】：Custom Control in a standard grid标准网格中的自定义控件
【发布时间】：2021-07-03 03:09:48
【问题描述】：

我需要在网格列中添加一个反应自定义控件。我可以不从头开始制作自定义网格吗？

我在想的是类似 ReactPeoplePicker 的东西，但已添加到现有网格中。

【问题讨论】：

【解决方案1】：

三周后我可以回答自己：是的，我可以。这就是我所做的：

使用 Powerapps CLI（我选择数据集模板）创建 PCF 并安装依赖项：

npm install
npm install react @types/react react-dom @types/react-dom @fluentui/react

创建一个 peoplepicker.tsx 并从 https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker 复制粘贴 react 组件代码。

在 index.ts 文件中我导入 react、react-dom 和组件：

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'

定义和初始化上下文和容器变量：

export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {

private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;

/**
 * Empty constructor.
 */
constructor() { }

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
    // Add control initialization code
    this.context = context;
    this.container = container;

渲染 react 组件并附加到容器：

public updateView(context: ComponentFramework.Context<IInputs>): void
{
    ReactDOM.render(
        React.createElement(PeoplePicker),
        this.container);

构建解决方案并导入 Power Apps 门户：

npm run build
pac pcf push --publisher-prefix myPrefix

最后，在 Power Apps 门户中，导航到网格（或子网格）属性并添加自定义控件。请记住，可能需要经典模式。

【讨论】：