要从另一个模块/文件访问函数内部的函数吗?

问题描述 投票:1回答:1

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;

game-buttons.js

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

我是ReactJS的新手。试图弄清楚如何通过单击index.js。中的标签图标来访问game-buttons.js中的resetGame()

函数。
javascript reactjs
1个回答
0
投票

如果我正确理解他想做什么,则不应将该方法导出为@YoannAugen。您应该将resetGame方法提升到Game组件,放置在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;

game-buttons.js

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
© www.soinside.com 2019 - 2024. All rights reserved.