Quiero acceder a un método desde fuera del componente. Encontré varios tutoriales que deberían permitirme llamar a métodos por window.PathfindingVisualizer.resetGrid() , pero recibo un error que dice que resetGrid no es una función
ejemplo que traté de seguir: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/
mi aplicación.js
function App() { return ( <div className="App"> <PathfindingVisualizer ref={(PathfindingVisualizer) => {window.PathfindingVisualizer = PathfindingVisualizer}} /> </div> ); } export default App;mi PathfindingVisualizer.js:
export default class PathfindingVisualizer extends React.Component { constructor(props) { super(props) this.state = { grid: [], mouseLeftDown: false, }; const mouseStrat = null; } resetGrid() { //do stuff } componentDidMount() { this.resetGrid(); this.mouseStrat = new MouseStrat(); //Object I want to call functions from } } Y quiero llamar a resetGrid() y setState desde fuera de reaccionar con:
//errors resetGrid and setState is not a function export class MouseStrat { handleMouseDown(row, col) { window.PathfindingVisualizer.resetGrid(); } }¿Qué estoy haciendo mal?
Entonces, si entiendo correctamente, tiene un componente con una variable que es una clase que contiene una función que llama a una función que ya está en el componente. Esto parece bastante complicado y puede haber una solución más simple para lo que está tratando de lograr.
Aquí hay una solución alternativa. Haga que la función resetGrid una propiedad de la clase MouseStrat:
export class MouseStrat { constructor(resetGrid) { this.resetGrid = resetGrid; } handleMouseDown(row, col) { this.resetGrid(); } } Luego, en PathfindingVisualizer :
export default class PathfindingVisualizer extends React.Component { constructor(props) { super(props) this.state = { grid: [], mouseLeftDown: false, mouseStrat: null // You had this as a variable before }; this.resetGrid = this.resetGrid.bind(this); // You must bind your function for it to work properly in a React component } function resetGrid () { //do stuff } componentDidMount() { this.resetGrid(); this.mouseStrat = new MouseStrat(this.resetGrid); // Now you pass the function as an argument } }¿Dónde estás llamando a estas funciones? Si se ejecutan demasiado pronto, es posible que window.PathfindingVisualizer aún no tenga un valor. Es posible que desee ejecutarlos en un gancho como componentDidUpdate .