0
votes

Comment appeler correctement une fonction à partir d'un composant dans un autre composant

J'ai vu quelques questions similaires, mais à propos des éléments parents / enfants, j'ai ce genre d'arborescence de nœuds:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false, isSticky: false };
    this.toggle = this.toggle.bind(this);


    this.indexPage = props.indexPage
    console.log(this.indexPage)
    console.log(this.indexPage.modals)
  }
}

Je veux appeler ClientDetails.openModal dans Header, j'ai essayé de nombreuses manières comme créer des refs pour ClientDetails dans indexPage, puis passer indexPage à l'en-tête comme prop, mais cela fonctionne bizarrement, je vois les refs des props.IndexPage, mais en essayant d'accéder directement aux refs, c'est underfind

class Modals extends React.Component {
  constructor(props) {
    super(props);
    this.clientDetailsRef = React.createRef();
  }

  render() {
    return (
      <>
        <ThankYou/>
        <ContactDetails ref={this.clientDetailsRef}/>
      </>
    )
  }
}

class IndexPage extends React.Component {
  constructor(props) {
    super(props);

    this.modals = React.createRef();
  }

  render() {
    return (
      <Layout>
        <SEO/>
        <Header indexPage={this}/>
        <Story/>
        <Products/>
        <Clients/>
        <Reviews/>
        <Partners/>
        <Footer/>
        <Modals ref={this.modals} />
      </Layout>
    )
  }
}

IndexPage -> Modals -> ClientDetails(it's modal component)
          -> Header

javascript reactjs gatsby

8 commentaires

Vous dites que vous avez essayé les arbitres. Avez-vous essayé ref.current ?

Par exemple, cette réponse: stackoverflow.com/a/24848228/1959054

Oui, j'ai fait référence pour ClientDetails dans Modals, et pour Modals dans IndexPage, puis j'ai passé IndexPage comme accessoire, et le problème est dans l'en-tête, je ne peux pas obtenir ces références via IndexPage

Je ne peux pas voir la structure de votre code, donc je ne suis pas vraiment sûr de ce que vous faites dans l'en-tête et d'où vous obtenez la référence

Regardez deux images jointes, indexPage a des modals (c'est ref) et quand je journal indexPage.modals c'est nul

Les images ne me disent pas ce que votre code ressemble. Comment passez-vous le PROP à l'en-tête? Comment obtenez-vous la référence en premier lieu? Poster des images de votre console ne nous aidera pas à vous aider

Désolé, j'ai joint un code

Au moment où vous êtes dans le constructeur d'en-tête, la propriété n'est peut-être pas encore définie

3 Réponses :

0
votes

Je voudrais essayer de faire cela: xxx

mais s'il vous plaît noter: la propriété ne fonctionnera pas dans le constructeur d'en-tête très probablement. Il devrait fonctionner si bien au moment où vous faites des choses comme Button.Enclick Callbacks.

0 commentaires

1
votes

Voici un petit violon pour appeler une fonction enfant depuis le parent

https: // jsfiddle. net / c1qfn9Lx / 9 /

class Modal extends React.Component {
 constructor(props) {
  super(props);
  this.state= {
   showModal: false
  }
  this.toggleModal = this.toggleModal.bind(this)
 }
 toggleModal() {this.setState({showModal: !this.state.showModal})}

render() {
 const { showModal } = this.state;
 return(
  <div className="modal">
   {showModal && 
    <div>
     Showing modal
    </div>
   }
  </div>
 )
 }
}

class TodoApp extends React.Component {
 constructor(props) {
   super(props)
   this.modalRef = React.createRef()
   this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
  this.modalRef.current.toggleModal();
 }

 render() {
   return (
     <div className="parent">
       <Modal ref={this.modalRef} />
       <button onClick={this.handleClick}>Click</button>
     </div>
   )
 }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

0 commentaires

1
votes

Je pense que vous pouvez résoudre votre problème en utilisant react.js context . Vous vouliez contrôler le composant Modals dans le composant Header. Vous avez donc essayé de référencer la fonction de basculement du composant Modals dans le composant Header pour résoudre le problème. Je pense que c'est une bonne solution. Mais à mon avis, le partage de l'état dans les composants homologues est également une autre solution. Vous pouvez donc utiliser le contexte react.js pour partager des états entre deux composants homologues dans un composant parent de ceux-ci. Je pense que faire cela suit la programmation déclarative de réaction.

Veuillez vérifier ce code

0 commentaires