向用户显示 Webhook URL

Question

我使用 yo teams 命令使用 Yeoman Generator for Microsoft Teams 生成了一个连接器应用程序。

当我在 src\client\msteamsConnector\MsteamsConnectorConfig.tsx 使用下面的代码时，我可以在控制台看到 webhook url。

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>

                    </div>
                </Flex.Item>
            </Flex>
    );
};

我真正想做的是在连接器配置页面上显示用户的 webhook url。但是当我用下面的代码尝试它时它不起作用：

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    let var1;

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
        var1 = setting.webhookUrl;
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>
                    {var1}
                    </div>
                </Flex.Item>
            </Flex>
    );
};

这可能是一个简单的问题，但我对前端技术没有经验，无法找到解决此问题的方法。我如何向自己显示用户的 webhook url？

Answer 1

试试下面的代码

import * as React from "react";
import { Provider, Flex, Header, Dropdown, ShorthandCollection, DropdownItemProps } from "@fluentui/react-northstar";
import { useState, useEffect, useRef } from "react";
import { useTeams } from "msteams-react-base-component";
import * as microsoftTeams from "@microsoft/teams-js";


/**
 * Implementation of the msteamsConnector Connector connect page
 */
export const MsteamsConnectorConfig = () => {

    microsoftTeams.initialize();

    const [webhookUrl, setWebhookURL] = React.useState("");

    microsoftTeams.settings.getSettings((setting: any) => {
        console.log(setting.webhookUrl);
        setWebhookURL(setting.webhookUrl);
    });

    return (
            <Flex fill={true}>
                <Flex.Item>
                    <div>
                    {webhookUrl}
                    </div>
                </Flex.Item>
            </Flex>
    );
};

向用户显示 Webhook URL

Showing Webhook URL to Users

javascript

typescript

reactjs

office365connectors

microsoft-teams