如何从另一个组件中的组件正确调用函数

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 回调之类的操作时起作用。