在使用SideNav和Twilio插件v2时，未定义错误` `activeView‘

Question

我正在使用Twilio插件来自定义react中的Flex版本2 (beta.1)。我想在边栏中添加一个自定义链接，其中包含一个新的自定义组件。

当选中创建的侧栏图标时，我尝试编写代码将图标切换为Active，但我得到了以下错误。

原始错误："activeView未定义“

代码如下。

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在任何地方都没有定义。根据我从曾傑瑞链接的视频中收集到的信息，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 },
    );
  }
}

这样，正确的道具将传递给您的TaskViewSidebarButton，您可以从道具中提取activeView并使用它呈现按钮的活动状态。