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 function。 現在我收到此錯誤：

警告：函數作為 React 子級無效。 如果您返回一個組件而不是從渲染中返回，則可能會發生這種情況。 或者，也許您打算調用此 function 而不是返回它。

Answer 1

您需要調用 numPicker function 返回一個數據，然后可以呈現

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