如何從另一個組件中的組件正確調用函數

Question

我看到了一些類似的問題，但是關於父/子元素，我有那種節點樹：

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

我想在 Header 中調用 ClientDetails.openModal，嘗試了很多方法，比如在 indexPage 中為 ClientDetails 創建引用，然后將 indexPage 傳遞給像 prop 一樣的標題，但它的工作方式很奇怪，我看到了 props.IndexPage 的引用，但是當嘗試直接訪問引用時，它是underfind

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>
    )
  }
}

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

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

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)
  }
}

Answer 1

這是一個從父級調用子函數的小小提琴

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"))

Answer 2

我認為您可以使用 react.js context解決您的問題。 您想控制 Header 組件中的 Modals 組件。 於是嘗試參考Header組件中的Modals組件切換功能來解決問題。 我認為這是一個很好的解決方案。 但在我看來，在對等組件中共享狀態也是另一種解決方案。 因此，您可以使用 react.js 上下文在它們的父組件中的兩個對等組件之間共享狀態。 我認為這樣做是在響應聲明式編程之后。

請檢查此代碼

Answer 3

我會嘗試這樣做：

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

    this.state = {modalsRef: null};
  }

  render() {
    return (
      <Layout>
        <SEO/>
        <Header modalsRef={this.state.modalsRef}/>
        <Story/>
        <Products/>
        <Clients/>
        <Reviews/>
        <Partners/>
        <Footer/>
        <Modals ref={r => !this.state.modalsRef && this.setState({modalsRef:r})} />
      </Layout>
    )
  }
}

但請注意：該屬性很可能在 Header 的構造函數中不起作用。 它應該在您執行 Button.onClick 回調之類的操作時起作用。