我试图在调用函数时遇到错误,这只是为了练习,因此我将所有内容保留在 App.tsx 中。我的课看起来像这样:
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>
)
}
}
我的 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"
}
完整错误如下:
类型'void'不能分配给类型'ReactNode'.ts(2322) index.d.ts(1348,9):预期的类型来自属性“ children” 在类型上声明的 'DetailedHTMLProps,HTMLDivElement>'
我已经搜索了此错误的解决方案并找到了this,但是我无法使用此解决方案解决问题。请让我知道如何解决此问题。谢谢。
答案 0 :(得分:3)
您需要从函数中返回一些信息。
renderCell
函数在哪里?也许您是说renderRow
?
答案 1 :(得分:2)
确保renderRows
函数返回它呈现的行,而不只是呈现它们而不执行任何操作。
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>
)
}
}