Estoy tratando de implementar el patrón de diseño de estrategia para cambiar dinámicamente la forma en que manejo los eventos del mouse en un componente de reacción.
Mi componente:
export default class PathfindingVisualizer extends React.Component { constructor(props) { super(props) this.state = { grid: [], mouseLeftDown: false, }; const mouseStrat2 = null; // Object I will change that has different functions for handling events } componentDidMount() { this.resetGrid(); this.mouseStrat2 = new StartEndStrat(); } render() { //buttons that change the object i want handling mouse events <button onClick={() => this.mouseStrat2 = new StartEndStrat(this)}>startendstrat</button> <button onClick={() => this.mouseStrat2 = new WallStrat(this)}>wallstrat</button> } }Quiero que las estrategias de mi mouse accedan a cambiar el componente con diferentes métodos para manejar los eventos del mouse
export class StartEndStrat { handleMouseDown(row, col) { // I want to access component state and call functions of the component this.setState({ mouseLeftDown: true }); PathfindingVisualizer.resetGrid(); } //other functions to change other stuff handleMouseEnter(row, col) { console.log('start end strat'); } } export class WallStrat { handleMouseDown(row, col) { this.setState({ mouseLeftDown: true }); } handleMouseEnter(row, col) { console.log('wallstrat'); } }La solución que encontré fue usar una devolución de llamada de referencia para hacer que el elemento DOM sea una variable global.
<MyComponent ref={(MyComponent) => window.MyComponent = MyComponent})/>
Luego puede acceder a MyComponent con window.MyComponent , funciones con window.MyComponent.method() o variables de estado con window.MyComponent.state.MyVar
Mi aplicación.js:
function App() { return ( <div className="App"> <PathfindingVisualizer ref={(PathfindingVisualizer) => {window.PathfindingVisualizer = PathfindingVisualizer}} /> </div> ); }Otro.js:
handleMouseDown() { window.PathfindingVisualizer.setState({mouseLeftDown: true}); }