尝试将函数传递给子组件时出现“TypeError: this.props.change

Question

我正在尝试将一个函数传递给一个子组件，该函数将触发逻辑，在按下按钮后在我的网页上显示一个简单的文本表单，但我收到错误消息：类型错误：this.props.changeFormStatus 不是函数下面是父组件的代码：import React from 'react';import ReactDom from 'react-dom';import RenderIcon from "./RenderIcon";import RenderForm from "./RenderForm";class RetroColumn extends React.Component {    constructor(props) {        super(props);        this.state = {formStatus:false};        this.changeFormStatus = this.changeFormStatus.bind(this);    }    changeFormStatus() {        this.setState({formStatus:true});    }    render() {        return (            <div className="column">                <div className="ui segment">                    <h1 className="ui header">                        <RenderIcon iconName="minus" iconMeaning="Remove"/>                        {this.props.columnName}                        <RenderIcon iconName="plus" whenUserClicks={this.changeFormStatus} iconMeaning="Add"/>                    </h1>                    <RenderForm revealForm={this.state.formStatus}/>                </div>            </div>        );    }};export default RetroColumn;这是子组件的代码：import React from 'react';import ReactDom from 'react-dom';class RenderIcon extends React.Component{    constructor(props){        super(props);    }    whenUserClicks() {        console.log(this.props);        this.props.changeFormStatus();    };    render() {        return (            <div className="ui vertical animated button" tabIndex="0" onClick={this.whenUserClicks()}>                <div className="hidden content">{this.props.iconMeaning}</div>                <div className="visible content">                    <i className={`${this.props.iconName} icon`}></i>                </div>            </div>        );    }}export default RenderIcon;

Answer 1

查看您正在呈现并向其传递函数的组件。你写了这个：

<RenderIcon iconName="plus" whenUserClicks={this.changeFormStatus} iconMeaning="Add"/>

这意味着在 RenderIcon 组件内部，该函数现在被命名为 this.props.whenUserClicks

在您的外部组件中，该函数名为 this.changeFormStatus。但是在内部组件中，它被命名为 this.props.whenUserClicks。

此外，您不是在调用 this.props.whenUserClicks。您在子组件中创建了一个名为 this.whenUserClicks 的新函数

此外，在您的子组件中，您有：

  <div onClick={this.whenUserClicks()}></div>

你想把它改成

 onClick={(e)=>{
      this.whenUserClicks()
 }

或者

 onClick={this.whenUserClicks}

如果您像以前一样调用该函数，那么该函数将在页面加载时立即运行，而不是等待 div 被点击。