Question

我正在将我的 .js 文件重构为下面代码中的 .tsx

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { checkMobile } from '../../utils/common'
import { animateScroll as scroll } from 'react-scroll'

import ErrorBoundary from '../../components/error-boundary'
import Section1 from './section1'
import Section2 from './section2'
import Section3 from './section3'
import Section4 from './section4'
import Section5 from './section5'
import Section6 from './section6'
import Section7 from './section7'

export default function Main (props) {
  const {
    bannerData
  } = props

  const [currentPage, setCurrentPage] = useState(0)
  const [isMobile, setIsMobile] = useState(false)

  const mainScrollFunc = () => {
    document.querySelector('header').classList.add('has-bg')

    if (document.querySelector('.mainScrollEvent')) {
      const scrollPosition = (document.body.scrollTop || document.documentElement.scrollTop) - (window.innerHeight / 1.5)
      const mainSections = document.querySelectorAll('.main-section')
      console.log('mainSections[0]', mainSections[0])
      const paddingTop = 90
      let toIndex = 0

      if (scrollPosition <= (mainSections[0] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 0
      } else if (scrollPosition <= (mainSections[1] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 1
      } else if (scrollPosition <= (mainSections[2] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 2
      } else if (scrollPosition <= (mainSections[3] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 3
      } else if (scrollPosition <= (mainSections[4] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 4
      } else if (scrollPosition <= (mainSections[5] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 5
      } else if (scrollPosition <= (mainSections[6] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 6
      }

      for (let i = 0; i < 7; i++) {
        document.querySelectorAll('.main_pager_button')[i].classList.remove('selected')
      }
      document.querySelector('.pagerButton' + toIndex).classList.add('selected')

      if (toIndex === 0) {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.add('is-active')
          document.body.classList.add('has-banner')
        }
      } else {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.remove('is-active')
          document.body.classList.remove('has-banner')
        }
      }

      setCurrentPage(toIndex)
    }
  }

  const onScroll = () => {
    const scrTop = document.body.scrollTop || document.documentElement.scrollTop
    const windowHeight = window.innerHeight
    const scrollPoint = windowHeight - 150
    if (scrollPoint < scrTop) {
      if (document.querySelector('.top-banner')) {
        document.querySelector('.top-banner').classList.remove('is-active')
        document.body.classList.remove('has-banner')
      }
    } else {
      if (document.querySelector('.top-banner')) {
        document.querySelector('.top-banner').classList.add('is-active')
        document.body.classList.add('has-banner')
      }
    }
    if (document.body.classList.contains('is-active')) {
      const bodyTop = document.body.style.top.replace('px', '')
      const mainSection1 = document.querySelector<HTMLElement>('.main-section.visual').offsetHeight - 150
      const header = document.querySelector('header')
      if (Math.abs(parseInt(bodyTop)) > mainSection1) {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.remove('is-active')
          document.body.classList.remove('has-banner')
        }
        if (header.classList.contains('is-white')) {
          document.querySelector('header').classList.remove('is-white')
          document.querySelector('header').classList.add('has-bg')
          document.querySelector('header').classList.add('has-white')
        }
      }
    }
  }

  const toMove = (e) => {
    if (e.target.classList[0] === 'main_pager_button') {
      e.preventDefault()

      const href = e.target.getAttribute('href')
      const offsetTop = document.querySelector(href).offsetTop

      scroll.scrollTo(offsetTop, { duration: 500, smooth: 'easeInOut' })
    }
  }

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setIsMobile(!!checkMobile(window.innerWidth))
      if (document.querySelector('.mainScrollEvent')) {
        if (checkMobile(window.innerWidth)) {
          window.addEventListener('scroll', onScroll)
        } else {
          window.addEventListener('scroll', mainScrollFunc)
        }
      }
    }
    return () => {
      if (checkMobile(window.innerWidth)) {
        window.removeEventListener('scroll', onScroll)
      }
    }
  }, [])

  return (
    <>
      <div id="contentsWrap" className="contents-wrap mainScrollEvent">
        <Section1 isMobile={isMobile} bannerData={bannerData} />
        <Section2 currentPage={currentPage}/>
        <Section3 />
        <Section4 isMobile={isMobile} currentPage={currentPage}/>
        <Section5 isMobile={isMobile} currentPage={currentPage} />
        <ErrorBoundary>
          <Section6 currentPage={currentPage} />
        </ErrorBoundary>
        <ErrorBoundary>
          <Section7 isMobile={isMobile} currentPage={currentPage}/>
        </ErrorBoundary>
        <nav className="main_pager_box" onClick={toMove}>
          <a href="#visual" className="main_pager_button pagerButton0 selected"></a>
          <a href="#since" className="main_pager_button pagerButton1"></a>
          <a href="#poomgo" className="main_pager_button pagerButton2"></a>
          <a href="#advantage" className="main_pager_button pagerButton3"></a>
          <a href="#difference" className="main_pager_button pagerButton4"></a>
          <a href="#cooperate" className="main_pager_button pagerButton5"></a>
          <a href="#contents" className="main_pager_button pagerButton6"></a>
        </nav>
      </div>
      <button type='button' className='btn btn-hidden' onClick={() => {
        scroll.scrollToTop({ duration: 500, smooth: 'easeInOut' })
      }}>TOP</button>
    </>
  )
}

Main.propTypes = {
  bannerData: PropTypes.array
}

我在一行中收到以下错误

<Section1 isMobile={isMobile} bannerData={bannerData} />

错误状态

Type '{ isMobile: boolean; bannerData: any; }' is not assignable to type 'IntrinsicAttributes & InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, never>> & Partial<InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, "bannerData">>>'.
  Property 'isMobile' does not exist on type 'IntrinsicAttributes & InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, never>> & Partial<InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, "bannerData">>>'.ts(2322)

我相信这是因为我将 isMobile 状态作为我的 props 发送。但是，我不明白为什么这个错误只发生在 Section1 而不是其他 Section4、Section5 或 Section7 的 isMobile {1}}。

我已尝试将 props 添加到 isMobile 中，并带有 const，但随后出现另一个错误，提示我无法重新声明块范围变量 bannerData。我该如何解决这个错误？

*** 编辑 ***

根据要求，下面是我的第 1 部分代码作为 isMobile 文件

.js

Answer 1

我是个白痴，isMobile 从不用于 Section1

Answer 2

如果要传递isMobile是Section1的prop，需要更新Section1.propTypes：

Section1.propTypes = {
  bannerData: PropTypes.array,
  isMobile: PropTypes.bool
}

类型“IntrinsicAttributes & InferPropsInner”上不存在属性“X”

2 个答案: