Réaction de la fonction d'appel JS dans un autre composant

Question

J'essaie d'appeler une fonction d'un autre composant dans Réagir avec la bibliothèque Mousetrap.

class Parent extends React.Component { 
    constructor() { 
     super(); 

    } 
    ... 
    render() { 
     return(...); 
    } 
} 
class Child extends React.Component { 
    constructor() { 
     super(); 
     this.state = { show: false }; 
     this.open = this.open.bind(this); 
     this.close = this.close.bind(this); 
    } 
    open() { 
     this.setState({ show: true }); 
    } 
    close() { 
     this.setState({ show: true }); 
    } 
    render() { 
     return(...); 
    } 
} 

Maintenant, ce que je veux faire est d'appeler Mousetrap.bind('e', function(e) { Child.open() }); quelque part dans le parent (parce que le parent sera rendu, et que l'enfant ne sera rendu sur cette commande). Mais, je ne suis pas sûr d'où inclure cela. Serait-il préférable d'appeler cela dans le constructeur, ou quelque part dans render(), ou ailleurs ailleurs que je n'ai pas considéré?

Answer 1

Il vaudrait mieux que cela fasse partie de votre état, par ex.

class Parent extends React.Component { 
    constructor(){ 
    super(); 
    this._eKeyPress = this._eKeyPress.bind(this); 
    this.state.showChild = false; 
    } 
    componentDidMount(){ 
    Mousetrap.bind('e', this._eKeyPress); 
    } 
    componentWillUnmount(){ 
    Mousetrap.unbind('e', this._eKeyPress); 
    } 
    _eKeyPress(){ 
    this.setState({showChild: true}); 
    } 

    render(){ 
    return <Child show={this.state.showChild} />; 
    } 
} 

La question suivante est de savoir si après cela vous devez créer l'enfant du tout, puisque vous pouvez également faire

render(){ 
    return this.state.showChild ? <Child /> : null; 
}