ReactJS：将函数传递给子组件会导致 TypeError答案

【问题标题】：ReactJS: passing function to child component results in TypeErrorReactJS：将函数传递给子组件会导致 TypeError
【发布时间】：2020-05-27 20:14:25
【问题描述】：

我正在尝试从 parent->child 传递一个回调函数，但是当渲染子组件时出现错误：TypeError: this.props.setCurrentWindow is not a function。

我试图传递函数setCurrentWindow的父组件

class Parent extends Component {
constructor(props){
  super(props);
  this.setCurrentWindow = this.setCurrentWindow.bind(this);
}

setCurrentWindow(){
  console.log("called")
}

render(){
  return(
      <Child
        setCurrentWindow={this.setCurrentWindow}
      />)}
    }

我试图调用setCurrentWindow的子组件

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


  render(){
    return(
        <div 
          onClick={()=>{this.props.setCurrentWindow()}}>
          {this.props.children}
        </div>
    )}
  }

为什么setCurrentWindow 在这里没有被识别为函数？

【问题讨论】：

也许你的意思是{this.props.setCurrentWindow}而不是{this.props.setCurrentWindow()}。
当我这样做时，我得到一个编译错误：Expected an assignment or function call and instead saw an expression
onClick={this.props.setCurrentWindow}>
如果你更新代码，你应该解释它不是相同的代码给你有问题的错误。必须查看问题编辑历史以查看实际导致错误的原因，这非常令人困惑..
啊，这似乎行得通！我意识到错误在于将其包装在匿名函数中。在我的完整代码中，我有多个在此 onClick 事件上调用的函数，有没有办法在匿名箭头函数 ()=>{} 中调用它，例如 onClick={()=>{this.props.setCurrentWindow(); this.setState({...}); this.myLocalFunction()}}?

标签： javascript reactjs

【解决方案1】：

请检查这个示例，我发现不同之处在于您的代码中没有像<div><h1>Hello</h1></div> 这样的子元素。除此之外一切正常。当我点击 div 时，它会在 console

中写入 call

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.setCurrentWindow = this.setCurrentWindow.bind(this);
    }

    setCurrentWindow() {
        console.log("called")
    }

    render() {
        return (
            <Child
                setCurrentWindow={this.setCurrentWindow}
            >
                <div>
                    <h1>Hello</h1>
                </div>
                </Child>
            )
    }
}

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

    render() {
        return (
            <div onClick={() => {
                this.props.setCurrentWindow()
            }}>
                {this.props.children}
            </div>
        );
    }
}

【讨论】：

【解决方案2】：

试试这个：

parent.jsx：

class Parent extends Component {
  // code omitted for brevity

  handleSetWindow = () => {
    //
  };

  render() {
    return (
      <div>
        <Child onSetWindow={this.handleSetWindow}
          />
      </div>
    );
  }
}

child.jsx：

class Child extends Component {

  render() {
    return (
      <div>
        <button onClick={() => this.props.onSetWindow()} >
          Set
        </button>
      </div>
    );
  }
}

【讨论】：

没有解释您的代码与问题代码有何不同？代码块和“试试这个”通常不被视为高质量的答案。

【解决方案3】：

一个愚蠢的答案，但这里的最终解决方案是，并非我的子组件的所有实例都被传递 this.setCurrentWindow 因此未定义的错误。杜尔！感谢您的回复！

【讨论】：