TS2559：类型"{子项：元素[];}"与类型"内部属性"没有共同的属性

Question

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

错误

• 主页.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

Answer 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。因此，您的代码可以更改为：

应用程序.tsx

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

主页.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

路由器.tsx

此组件不会更改。

Answer 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>
</>
)
}