8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

@iFrame-resizer/react 实施错误 - 未捕获的语法错误:意外的标记“s”,'scroll-to-top' 不是有效的 JSON

Sefa Dedeoglu 3月前

234 0

我正在使用最新版本的 iframe-resizer/react 来自动调整 iframe 的高度和宽度。每当我对内容做出反应时,我都会收到运行时错误 -VM2860:1

我正在使用最新版本的 iframe-resizer/react 来自动调整 iframe 的高度和宽度。每当我对内容做出反应时,我都会收到运行时错误,指出 -VM2860:1 未捕获的语法错误:意外的令牌“s”,\'scroll-to-top\' 不是有效的 JSON

我不知道这是从哪里来的。我检查了 iframe 中发生的事件。那里也没有提到 scroll-to-top 这个东西。

下面是我编写的代码片段。请帮我解决这个问题。

import IFrameResizer from "@iframe-resizer/react";
<IFrameResizer
          src={iframeSrc}
          license="GPLv3"
          className="iframe-dialog"
          title="Iframe Dialog"
          onLoad={onLoad}
          scrolling={false}
          forwardRef={iframeRef}
          style={{
            width: "100%",
            border: "none",
            opacity: "100",
            height: "100vh",
          }}
 />

我已尝试使用 iframe-resizer/react 中提供的 onResized、onMessage 处理程序来获取消息,但仍然没有任何反应。

帖子版权声明 1、本帖标题:@iFrame-resizer/react 实施错误 - 未捕获的语法错误:意外的标记“s”,'scroll-to-top' 不是有效的 JSON
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Sefa Dedeoglu在本站《typescript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我有一个 react.js 应用程序,它作为小部件添加到我们客户的网站。客户的网站可以使用任何工具构建,例如 wordress / angular / react 等。我们有两种类型的小部件:搜索和

    我有一个 react.js 应用程序,它作为小部件添加到我们客户的网站。客户的网站可以使用任何工具构建,例如 wordress / angular / react 等。

    我们有两种类型的小部件: search chat 。我对两者都使用一个存储库,生成两个单独的版本,并托管在 aws s3 上。

    在客户的网站上,我们只需添加托管在 s3 上的构建的 index.js 和 index.css 文件的脚本和样式表。到目前为止,它运行良好。这是我们的示例构建:

    在我的应用中,我们可以根据客户的需求延迟加载多个网格(例如,在上面的构建中,您可以看到旅行网格被延迟加载)。我们需要这样做,以便我们的构建大小不会增加太多,并且在任何单个客户的站点上,仅加载与该客户相关的网格。

    在客户网站上 search build chat build ,一切都正常

    下面是一个延迟加载行程网格的加载器示例:

    import React, { Suspense, useMemo } from 'react'
    
    // Utility function to lazy load the component
    const getTripGridLazyLoaded = async organizationSlug => {
      switch (organizationSlug) {
        case 'clientA':
          return await import('./clientA/TripsGrid')
        case 'clientB':
          return await import('./clientB/TripsGrid')
        default:
          return await import('./common/TripsGrid')
      }
    }
    
    const TripsGridLoader = ({
      id,
      items,
      title,
      isLessThanLaptop,
      router,
      language,
      random_match,
      showRelevancyInfo,
      organizationSlug,
      itemsPerRow,
      itemsPerPage,
      isChatMode,
    }) => {
      // Memoize the lazy-loaded component based on organizationSlug
      const TripGridLazyLoaded = useMemo(() => {
        if (!organizationSlug) return null
        return React.lazy(() => getTripGridLazyLoaded(organizationSlug))
      }, [organizationSlug])
    
      return (
        <>
          <Suspense fallback={<></>}>
            <TripGridLazyLoaded
              id={id}
              title={title}
              items={items}
              random_match={random_match}
              isLessThanLaptop={isLessThanLaptop}
              router={router}
              language={language}
              showRelevancyInfo={showRelevancyInfo}
              organizationSlug={organizationSlug}
              itemsPerRow={itemsPerRow}
              itemsPerPage={itemsPerPage}
              isChatMode={isChatMode}
            />
          </Suspense>
        </>
      )
    }
    
    export default TripsGridLoader
    

    以下是行程网格的代码示例:

    import React, { useState, useEffect } from 'react'
    import { GridWrapper, ItemsWrapper } from './style'
    import TripItem from './TripItem'
    import { GridTitle, GridSubtitle, ShowMoreCta } from './style'
    import { TRANSLATIONS_TEXTS } from '../../../../utils/constants'
    
    const TripsGrid = ({
      id,
      items,
      title,
      isLessThanLaptop,
      router,
      language,
      random_match,
      showRelevancyInfo,
      itemsPerRow,
      itemsPerPage,
      isChatMode,
    }) => {
      const [currentIsLessThanLaptop, setIsCurrentIsLessThanLaptop] =
        useState(false)
      const [itemsToShow, setItemsToShow] = useState(0)
      const [gridId, setGridId] = useState(null)
    
      useEffect(() => {
        if (isLessThanLaptop) setIsCurrentIsLessThanLaptop(isLessThanLaptop)
      }, [isLessThanLaptop])
    
      useEffect(() => {
        if (id !== gridId) {
          setGridId(id)
          setItemsToShow(itemsPerPage)
        }
      }, [id])
    
      if (!items?.length) return null
    
      const getItems = () => {
        const slicedItemsToShow = items.slice(0, itemsToShow)
    
        let itemsToReturn = slicedItemsToShow?.map((item, i) => {
          return (
            <TripItem
              key={item.id || item.url + item?.name}
              isLessThanLaptop={currentIsLessThanLaptop}
              router={router}
              item={item}
              language={language}
              showRelevancyInfo={showRelevancyInfo}
              randomMatch={random_match}
              itemsPerRow={itemsPerRow}
            />
          )
        })
    
        return itemsToReturn
      }
    
      if (getItems().length) {
        return (
          <GridWrapper id='grid-wrapper-trip'>
            <GridTitle $padding={'0px 15px 0px 0px'} isChatMode={isChatMode}>
              {title}
            </GridTitle>
            <ItemsWrapper id='grid-trip-items-wrapper'>{getItems()}</ItemsWrapper>
            {itemsToShow < items.length ? (
              <ShowMoreCta
                onClick={() => {
                  setItemsToShow(itemsToShow + itemsPerPage)
                }}
              >
                {TRANSLATIONS_TEXTS.show_more[language]}
              </ShowMoreCta>
            ) : null}
          </GridWrapper>
        )
      } else return null
    }
    
    export default TripsGrid
    
    

    当旅行网格(或任何其他网格延迟加载)时,我收到以下错误,此外,这些错误有时似乎是随机发生的。

    我研究了这个问题,花了好几个小时。根据 这里的 ,这是由于错误的钩子调用或 React 版本不匹配错误造成的。

    • 我已经通过日志检查了 React 版本在应用程序加载时间和延迟加载组件的加载时间上是否相同 console.log(React.version)
    • 使用两个小部件中的一个时不存在错误,这令人 search 困惑 chat
    • 我已经添加了代码。看起来我没有任何错误的钩子调用

    如果我这样做是 npm ls react 为了查看我的应用中是否有多个版本的 React,那么我得到的只有一个版本。输出如下:

    enter image description here

    请注意,当我不像这样延迟加载行程网格(或任何其他网格)时,它也能正常工作:

    import React, { useMemo } from 'react'
    import Common from './common/TripsGrid'
    import ClientA from './clientA/TripsGrid'
    import ClientB from './clientB/TripsGrid'
    
    const TripsGridLoader = ({
      id,
      items,
      title,
      isLessThanLaptop,
      router,
      language,
      random_match,
      showRelevancyInfo,
      organizationSlug,
      itemsPerRow,
      itemsPerPage,
      isChatMode,
    }) => {
      // Memoize the lazy-loaded component based on organizationSlug
      const TripGridLazyLoaded = useMemo(() => {
        if (!organizationSlug) return null
        switch (organizationSlug) {
          case 'clientA':
            return ClientA
          case 'clientB':
            return ClientB
          default:
            return Common
        }
      }, [organizationSlug])
    
      return (
        <>
          <TripGridLazyLoaded
            id={id}
            title={title}
            items={items}
            random_match={random_match}
            isLessThanLaptop={isLessThanLaptop}
            router={router}
            language={language}
            showRelevancyInfo={showRelevancyInfo}
            organizationSlug={organizationSlug}
            itemsPerRow={itemsPerRow}
            itemsPerPage={itemsPerPage}
            isChatMode={isChatMode}
          />
        </>
      )
    }
    
    export default TripsGridLoader
    

    谁能给我指出正确的方向?

返回
作者最近主题: