TS2559：类型'{孩子：元素[]； }' 与类型 'IntrinsicAttributes' 没有共同的属性答案

【问题标题】：TS2559: Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'TS2559：类型'{孩子：元素[]； }' 与类型 'IntrinsicAttributes' 没有共同的属性
【发布时间】：2021-07-19 04:03:34
【问题描述】：

我想使用react-router-dom by React 和TypeScript。我在<Router> Home.jsx 有一个打字错误。

错误

Home.tsx

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.TS2559(9)

App.tsx

import React from 'react'
import Home from './pages/Home'


function App() {
  return (
    <div>
      <Home />
    </div>
  )
}

export default App

首页.tsx

import React from 'react'
import { Button, TitleDesc } from '../components/Index'
import { Link } from 'react-router-dom'
import Router from '../router'

const Home: React.FC = () => {
  return (
    <>
      <Router>
        <div>
          <div>Hii</div>
          <div>
            <Link to='/login'><Button color='green'>Login</Button></Link>
            <Link to='/register'><Button color='blue'>Register</Button></Link>
          </div>
        </div>
        <TitleDesc title='Hi' desc='Hi' />
      </Router>
    </>
  )
}

export default Home

router.tsx

import * as React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/Login' component={Login} />
        <Route exact path='/Register' component={Registerl} />
        <Route component={() => <h1>204 No Content</h1>} />
      </Switch>
    </BrowserRouter>
  )
}

export default Router

【问题讨论】：

请说明错误发生在哪个文件中，行号也可能。

标签： reactjs typescript

【解决方案1】：

这是因为你没有在router.tsx 中调用{props.children}。将其更改为以下代码将消除错误：

const Router = : React.FunctionComponent (props) => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/Login' component={Login} />
        <Route exact path='/Register' component={Registerl} />
        <Route component={() => <h1>204 No Content</h1>} />
        {props.children}
      </Switch>
    </BrowserRouter>
  )
}

但从逻辑上讲，它不需要像您那样做某事。因为你的Router 将处理路由，你不需要在Home 中再次使用它。因此，不要在App 中使用Home，而是将其转换为在您的App 中使用Router。因此您的代码可以更改为：

App.tsx

function App() {
  return (
    <div>
      <Router/>
    </div>
  )
}

export default App

Home.tsx

const Home: React.FC = () => {
  return (
    <>
        <div>
          <div>Hii</div>
          <div>
            <Link to='/login'><Button color='green'>Login</Button></Link>
            <Link to='/register'><Button color='blue'>Register</Button></Link>
          </div>
        </div>
        <TitleDesc title='Hi' desc='Hi' />
    </>
  )
}

export default Home

Router.tsx

这个组件不会改变。

【讨论】：

【解决方案2】：

我认为Router 只接受一个孩子。你有两个：div 和 TitleDesc。将它们包裹在<> 中，应该没问题：

const Home: React.FC = () => {
  return (
    <>
      <Router>
        <> {/* <-- new wrapper */ }
          <div>
            <div>Hii</div>
            <div>
              <Link to='/login'><Button color='green'>Login</Button></Link>
              <Link to='/register'><Button color='blue'>Register</Button></Link>
            </div>
          </div>
          <TitleDesc title='Hi' desc='Hi' />
        </> {/* <-- new wrapper */}
      </Router>
    </>
  )
}

【讨论】：