javascript - React JS - 传递子组件的函数

Question

我有一个应用程序组件，其内部有一个函数“modalToggled”。我想将该函数传递给多个子组件，直到到达最后一个“interiores”组件。

像这样:

<App> -> <Coluna1> -> <MenuPrincipal> -> <Portfolio> -> <PortfolioMenu> -> <interiores>

应用程序组件，所有组件的父组件:

import React, { Component } from 'react';
import Coluna1 from './Coluna1'    

class App extends Component {
  constructor(props) {
    super(props)       
    this.state = {
      modalOn: false
    }
   this.modalToggled = this.modalToggled.bind(this)
  }      

  modalToggled = (on) => {
    this.setState({modalOn: on});
  }      

  render() {
    return (
      <div>          
          <Coluna1 onModalToggle={this.modalToggled}/>
      </div>
    )
  }
}

export default App;

这是“Coluna1”的第一个子组件。我在另一个中做了同样的事情:“MenuPrincipal”、“Portfolio”、“PortfolioMenu”

class Coluna1 extends Component {
  constructor(props){
    super(props)
  }

  render() {
    return (
      <div>
        <Header />
        <MenuPrincipal onModalToggle={this.props.modalToggled} />
      </div>
    )
  }
}

export default Coluna1

因此这是最后一个组件内部，当我单击按钮时会出现错误消息:

类型错误:_this.props.onModalToggle 不是函数

import React, { Component } from 'react'    
import Modal from 'react-responsive-modal';    


class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {              
      open: false
    }      
  }

  onOpenModal = () => {
    this.setState({ open: true });
    this.props.onModalToggle(true);
  };

  onCloseModal = () => {
    this.setState({ open: false });
    this.props.onModalToggle(false);
  };   

  render() { 
    const { open } = this.state;   
    return (                  
      <div>
          <button onClick={this.onOpenModal}>Open modal</button>
          <Modal open={open} onClose={this.onCloseModal} center></Modal>                    
     </div>
    )
  }
}

export default Interiores;

有人知道怎么解决吗？谢谢

Answer 1

它会发生，因为在 App 类中你传递了名为 onModalToggle 的 prop:

<Coluna1 onModalToggle={this.modalToggled}/>

但是在 Coluna1 中，您收到的 Prop 名称错误，modalToggled:

<MenuPrincipal onModalToggle={this.props.modalToggled} />

只需使 props 的名称相等即可。在 Coluna1 和其他中间组件中，通过 onModalToggle 传递和接收此属性:

<MenuPrincipal onModalToggle={this.props.onModalToggle} />