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()
函数。如果我正确理解他想做什么,则不应将该方法导出为@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