Javascript 从另一个模块/文件访问函数内部的函数？

index.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    import SquareBox from './game-buttons.js'


    const Game = () => {
      return (
        <div className="main-container">
          <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => SquareBox.resetGame}></i>
          <SquareBox />
        </div>
      )
    }


    ReactDOM.render(<Game />, document.getElementById('root'));

    export default Game;

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = () => {

    // reset game
    function resetGame () {
        console.log("Game reset");
    }

   return (
        <div>
            Testing
        </div >
    )
}


export default SquareBox

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = ({handleClick}) => {



   return (
        <div>
            <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => handleClick}></i>
        </div >
    )
}


export default SquareBox

从“React”导入React
从“react dom”导入react dom
导入“./index.css”
从“./game buttons.js”导入SquareBox
康斯特游戏=（）=>{
返回(
SquareBox.resetGame}>
)
}
ReactDOM.render（，document.getElementById（'root'））；
出口违约博弈；

游戏按钮.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    import SquareBox from './game-buttons.js'


    const Game = () => {
      return (
        <div className="main-container">
          <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => SquareBox.resetGame}></i>
          <SquareBox />
        </div>
      )
    }


    ReactDOM.render(<Game />, document.getElementById('root'));

    export default Game;

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = () => {

    // reset game
    function resetGame () {
        console.log("Game reset");
    }

   return (
        <div>
            Testing
        </div >
    )
}


export default SquareBox

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = ({handleClick}) => {



   return (
        <div>
            <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => handleClick}></i>
        </div >
    )
}


export default SquareBox

import React，{useState}来自“React”
从“react dom”导入react dom
从“./index.js”导入游戏
导入“./index.css”
常数SquareBox=（）=>{
//重置游戏
函数重置游戏（）{
控制台日志（“游戏重置”）；
}
返回(
测试
)
}
导出默认方形框

---

我是新手。试图通过单击index.js中的标记图标来了解如何访问游戏按钮.js中的重置游戏（）函数。如果我正确理解OP想要做什么： 您应该将方法resetGame提升到游戏组件，放置在SquareBox中，并将函数resetGame作为道具传递，可能类似于：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import SquareBox from './game-buttons.js'


class Game extends React.Component {

// reset game
function resetGame () {
        console.log("Game reset");
}

render() {
     return (
         <div className="main-container">

         <SquareBox handleClick={() => this.resetGame} />
        </div>
     )
   }
}

ReactDOM.render(<Game />, document.getElementById('root'));

export default Game;

从“React”导入React
从“react dom”导入react dom
导入“./index.css”
从“./game buttons.js”导入SquareBox
类游戏扩展了React.Component{
//重置游戏
函数重置游戏（）{
控制台日志（“游戏重置”）；
}
render（）{
返回(
这个.resetGame}/>
)
}
}
ReactDOM.render（，document.getElementById（'root'））；
出口违约博弈；

游戏按钮.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    import SquareBox from './game-buttons.js'


    const Game = () => {
      return (
        <div className="main-container">
          <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => SquareBox.resetGame}></i>
          <SquareBox />
        </div>
      )
    }


    ReactDOM.render(<Game />, document.getElementById('root'));

    export default Game;

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = () => {

    // reset game
    function resetGame () {
        console.log("Game reset");
    }

   return (
        <div>
            Testing
        </div >
    )
}


export default SquareBox

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Game from './index.js'
import './index.css'



const SquareBox = ({handleClick}) => {



   return (
        <div>
            <i id="reset-icon" className="fas-disabled fas fa-redo-alt" onClick={() => handleClick}></i>
        </div >
    )
}


export default SquareBox

import React，{useState}来自“React”
从“react dom”导入react dom
从“./index.js”导入游戏
导入“./index.css”
常量SquareBox=（{handleClick}）=>{
返回(
handleClick}>
)
}
导出默认方形框

您可以通过传递类组件的内部方法

ref

为此，将

squareBox

组件设为

class

组件，然后通过调用其

ref.resetGame

查看

class SquareBox扩展了React.Component{
构造函数（）{
超级（）；
this.resetGame=this.resetGame.bind（this）；
}
//重置游戏
重置游戏=（）=>{
控制台日志（“游戏重置”）；
};
render（）{
回归测试；
}
}
康斯特游戏=（）=>{
让sb=React.useRef（）；
返回(
sb.current？sb.current.resetGame（）：未定义}
>
重置
);
}
ReactDOM.render（，root）

你不能。但是为什么不把这个方法移出组件并导出它呢？@YoannAugen我想通过resetGame（）访问SquareBox（）中声明的一些状态（钩子）@YoannAugen这个需求是可能的；这是一个具有讽刺意味的评论，暗示着什么，还是仅仅是一个陈述？如果你能澄清你的需求，也许我们可以扩大答案