reactjs - 将 SideNav 与 Twilio Flex Plugin v2 结合使用时出现错误 `activeView is not defined`

Question

我正在使用 Twilio Flex 插件在 React js 中自定义 Flex ui 版本 2 (beta.1)。我想使用新的自定义组件在侧边栏中添加一个自定义链接。

我尝试编写代码以在选择创建的侧边栏图标时将图标切换为事件状态，但出现以下错误。

Original error: "activeView is not defined"

代码如下。

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import { SideLink, Actions } from '@twilio/flex-ui';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='taskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <SideLink
        key='taskViewSideLink'
        icon='Supervisor'
        iconActive='SupervisorBold'
        isActive={activeView === 'taskView'}
        onClick={() =>
          Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
        }
      >
        Pending Tasks
      </SideLink>,
      { sortOrder: 2 },
    );
  }
}

预先感谢您的帮助。

Answer 1

这里的问题是 activeView 尚未在任何地方定义。根据我从 video that Jerry linked to 收集到的信息, activeView 是传递到 Flex 内组件的属性。但是，您尝试直接在 FlexPlugin 对象中使用它。

相反，您应该创建一个返回新 SideLink 组件的自定义组件，如下所示:

import React from 'react';
import { SideLink, Actions } from '@twilio/flex-ui';

const TaskViewSidebarButton = ({ activeView } => {
  return <SideLink
           key='taskViewSideLink'
           icon='Supervisor'
           iconActive='SupervisorBold'
           isActive={activeView === 'taskView'}
           onClick={() =>
             Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
           }
         >
           Pending Tasks
         </SideLink>;
});

export default TaskViewSidebarButton;

然后在您的插件中，您可以导入此 TaskViewSidebarButton 组件并在 SideNav.Content 中使用它:

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import TaskViewSidebarButton from './components/TaskView/TaskViewSidebarButton';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='TaskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <TaskViewSidebarButton key="task-view-sidebar-button" />,
      { sortOrder: 2 },
    );
  }
}

这样，正确的 Prop 就会传递到您的 TaskViewSidebarButton，您可以从 Prop 中提取 activeView 并使用它来渲染按钮的事件状态。