React 显示“函数作为 React 子级无效。如果您从渲染返回 Component 而不是 <Component />，则可能会发生这种情况”

Question

以下是 game.js 和 app.js 主文件：

//Heres the game file//

import React, { Component } from "react";

class Game extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 0 };
    this.numPicker = this.numPicker.bind(this);
  }
  numPicker(e) {
    let rand = Math.floor(Math.random() * this.props.maxNum);
    return rand;
  }
  render() {
    return (
      <div>
        <h1>Hellow World {this.numPicker}</h1>
      </div>
    );
  }
}

export default Game;



//Heres the main file://


import React from "react";

import "./App.css";
import Game from "./game";

function App() {
  return (
    <div className="App">
      <Game maxNum={1} />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 game.js 文件中，我在 H1 中使用了 numPicker 函数。现在我收到此错误：

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

Answer 1

您需要调用 numPicker 函数，该函数返回可以呈现的数据

<h1>Hellow World {this.numPicker()}</h1>