如何将产品Fruit的清单嵌入到React应用程序中

Question

我正在尝试将清单嵌入到我的反应应用程序中。单击某个按钮后它应该可见。

阅读productFruit的文档我可以看到我需要使用： window.productFruits.api.checklists.injectToElement(checklistId, yourElement); 我尝试将它应用到 useEffect 挂钩，如下所示：

 useEffect(() => {
    if (window?.productFruits?.api.checklists) {
      const yourElement = document.getElementById(
        'SideBar-ListItemIconWrapper-Group',
      );
      if (yourElement) {
        try {
          window.productFruits.api.checklists.injectToElement(
            id,
            yourElement,
          );
          console.log('SUCCESS');
        } catch (error) {
          console.error('Error occurred during injection:', error);
        }
      }
    }
  }, [])

但我不断收到这些错误：

'注入期间发生错误：错误：未找到清单。可能的原因：1）ID错误，2）清单被驳回，3）清单未发布'

id正确并已发布。

我还尝试创建这样的异步函数：

  const productFruitsFunction = async () => {
    const yourElement = document.getElementById(
      'SideBar-ListItemIconWrapper-Group',
    );
    const checklistId = id;
    if (
      window.productFruits &&
      window.productFruits.api &&
      window.productFruits.api.checklists
    ) {
      try {
        console.log('test');
        await window.productFruits.api.checklists.injectToElement(
          checklistId,
          yourElement,
        );
        console.log('SUCESSO');
      } catch (error) {
        console.error('ERROR: ', error);
      }
    }
  };

但也不断遇到同样的错误。

Answer 1

您可以使用官方指南安装React或NextJS应用程序