Question

目标：当我的游戏组件收到道具时，我希望componentDidUpdate()调用名为consolelog的函数，该函数是另一个名为gamecode()的函数的子函数。

问题：使用this.gameCode.consolelog()始终会返回错误消息，指出consolelog不是gameCode的函数。

注意： Gamecode()从名为gamecode.js

的文件导入到我的反应组件（游戏）中

组件：

import React, {Component} from 'react';

import {gameCode, showLeaderboard} from '../utility/gamecode';

class Game extends Component{
  constructor(props){
    super();
    this.state = {
      drawL : null
    }
  };

  componentDidMount(){
    this.gameCode();
  };

  componentDidUpdate(){
    //will run when the state changes
    if(this.props.leaderboard){
        var a = this.props.leaderboard;
        this.gameCode.consolelog(a);
    }
  }   

  render(){
    return(
      <div className="Game">
        <canvas id="canvas"></canvas>
        <button onClick={this.props.getleaderboard} className="showleaders">Show leaderboard</button>
      </div>
    );
  }
}

export default Game;

GameCode.js功能：

gameCode(){
  //the main function initializes some stuff immediately and start running the update() and draw() functions
  const canvas = document.getElementById('canvas');
  canvas.width = 800;
  canvas.height= 600;
  const ctx = canvas.getContext("2d");
  const FPS = 30;
  setInterval(() => {
      update();
      draw();
  }, 1000/FPS);

  //but sometimes I need to call other functions on demand, but these functions depend on what the parent function and other sibling functions
  function consolelog(a){
    console.log("success!");
    console.log(a);
  }
}

Answer 1

您的Game课程没有gameCode方法，因此您无法在其任何方法中使用this.gameCode。

如果你在js文件中导入gameCode，你可以在里面的任何地方使用它：

componentDidMount(){
    gameCode();
};

这里的问题是你的例子中的函数gameCode没有做任何事情 - 它每次调用时都只定义一个新函数（本地）。它不是一个可以用来调用它的函数的对象......

如果gameCode是一个对象，您可以使用：

gameCode.consolelog(something);

但不是

您可以将gameCode更改为类似的内容：

export default gameCode = {
    consolelog: function (a){
        console.log("success!");
        console.log(a);
    }
}

现在gameCode是一个对象，consolelog属性作为函数，您可以在gameCode.consolelog(...)类中使用Game。

Answer 2

您可以使用revealing module pattern的某些内容。将私有变量保留在gameCode的范围内，并导出所需的公共变量和函数。

const gameCode = (function () {

  const a = 1;

  function consolelog() {
    console.log(`success${a}`);
  }

  return {
    consolelog: consolelog
  }

});

export default gameCode;

在您的其他档案中：

import gameCode from './gameCode';

componentDidMount() {
  const gc = gameCode();
  gc.consolelog(); // success1
}

<强> DEMO

Answer 3

首先，您不需要在导入后使用this关键字调用它。你只需这样称呼它：gameCode();。
其次，您没有从此函数返回任何内容，因此您无法访问它的嵌套函数我认为你需要重新思考你暴露对象和功能的方式例如，GameCode.js可能如下所示：

 const consolelog = function (a){
    console.log("success!");
    console.log(a);
 }
 export consolelog;

然后将其导入您的组件：

import {consolelog} from '../utility/gamecode';

修改
作为评论的后续内容，如果您需要一个嵌套其他函数和变量的函数，那么您可以创建一个class;

class GameCode { constructor(){ this.consolelog = this.consolelog.bind(this); } consolelog(a){ console.log("success!"); console.log(a); } } export default GameCode;

然后将其导入组件：

import GameCode from '../utility/gamecode'; // notice the import for default exports

如何调用嵌套的react函数

3 个答案: