[英]Error: Type 'void' is not assignable to type 'ReactNode'
I'm trying to get an error while calling the function, this is just for practice so I have kept everything inside App.tsx .我在调用 function 时尝试出错,这只是为了练习,所以我将所有内容都保存在App.tsx中。 My class looks like this:我的 class 看起来像这样:
enum Actor {
None = '',
}
const initializeCard = () => {
//some logic here
return card;
}
export default class App extends Component<{}, State> {
state: State ={
card: initializeCard()
}
public renderRows = () => {
const { card } = this.state;
board.map((actor, index) => this.renderRow(actor, index));
}
public renderRow = (actor: Actor, index: number) => {
return(
<div className="cell">
</div>
)
}
public render() {
return (
<div className="App">
<div>
{ this.renderRows() } // Here I'm getting the error
</div>
</div>
)
}
}
My Package.json looks like:我的Package.json看起来像:
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "~3.7.2"
}
The complete error is as following:完整的错误如下:
Type 'void' is not assignable to type 'ReactNode'.ts(2322) index.d.ts(1348, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps, HTMLDivElement>'类型 'void' 不可分配给类型 'ReactNode'.ts(2322) index.d.ts(1348, 9):预期类型来自属性 'children',它在类型 'DetailedHTMLProps, HTMLDivElement>' 上声明
I've searched for the solutions for this error and found this but I couldn't solve my problem with this solution.我已经搜索了这个错误的解决方案并找到了这个,但我无法用这个解决方案解决我的问题。 Please let me know how can I fix this.请让我知道我该如何解决这个问题。 Thanks.谢谢。
You need to return something from your function.你需要从你的 function 中返回一些东西。
Where is renderCell
function? renderCell
function 在哪里? perhaps you mean renderRow
?也许你的意思是renderRow
?
Make sure that the renderRows
function returns the rows it renders rather than just rendering them and doing nothing.确保renderRows
function 返回它渲染的行,而不是仅仅渲染它们而不做任何事情。
enum Actor {
None = '',
}
const initializeCard = () => {
//some logic here
return card;
}
export default class App extends Component<{}, State> {
state: State ={
card: initializeCard()
}
public renderRows = () => {
const { card } = this.state;
return board.map((actor, index) => this.renderRow(actor, index));
}
public renderRow = (actor: Actor, index: number) => {
return(
<div className="cell">
</div>
)
}
public render() {
return (
<div className="App">
<div>
{ this.renderRows() } // Here I'm getting the error
</div>
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.