Question

我有一个App组件，其内部有一个函数'modalToggled'。我想将函数传递给多个子组件，直到到达最后一个“内部”组件。

赞：

<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

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

TypeError：_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：

avgCost

但是在Coluna1中，您收到的道具名称错误， modalToggled ：

<Coluna1 onModalToggle={this.modalToggled}/>

只需使道具名称相等即可。在Coluna1和其他中间组件中，以 onModalToggle 传递和接收此道具：

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

Answer 2

这是问题

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

由于这是一个类函数，因此需要像

这样定义

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

React JS-子组件的传递函数

2 个答案: