错误:无法将类型“ void”分配给类型“ ReactNode”

时间:2020-04-09 23:37:31

标签: javascript reactjs typescript typescript3.0 react-tsx

我试图在调用函数时遇到错误,这只是为了练习,因此我将所有内容保留在 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,但是我无法使用此解决方案解决问题。请让我知道如何解决此问题。谢谢。

2 个答案:

答案 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>
    )
  }
}