无法从父反应组件调用子反应组件的属性

Posted 2023-02-25

【中文标题】无法从父反应组件调用子反应组件的属性

【英文标题】：Unable to call a property of child react component from parent react component

【发布时间】：2018-10-07 04:44:45

【问题描述】：

下面是child & parent父反应组件的jsx代码。 我正在尝试将数据从子反应组件传递给父反应组件作为属性 (generateReport)，但它会引发错误

未捕获的 TypeError：this.props.generateReport 不是函数 在 MetricsReport.generateReport (metrics-report.jsx:40)

child.jsx

import React,  Component  from 'react';
import 
  Row,
  Col,
  Input,
  Collapsible,
  CollapsibleItem
 from 'react-materialize';

class MetricsReport extends Component 
  constructor(props) 
    super(props);
    this.state = 
      metricsParams:  reportType: '' 
    ;
    this.getReportType = this.getReportType.bind(this);
    // Add the below line as per the answer but still facing the problem
    this.generateReport = this.generateReport.bind(this);
  
  getReportType(event) 
    console.log(this.state.metricsParams);
    let metricsParams =  ...this.state.metricsParams ;
    metricsParams.reportType = event.target.value;
    this.setState( metricsParams );
  

  generateReport() 
    this.props.generateReport(this.state.metricsParams);
  
  componentDidMount() 

  render() 
    return (
      <div class="ushubLeftPanel">
        <label>'Report Type'</label>
        <select
          id="metricsDropDown"
          className="browser-default"
          onChange=this.getReportType
        >
          <option value="MetricsByContent">Metrics By Content</option>
          <option value="MetricsByUser">Metrics By User</option>
        </select>
        <button onClick=this.generateReport>Generate Report</button>
      </div>
    );
  


export default MetricsReport;

parent.jsx

import React,  Component  from 'react';
import MetricsReport from '../components/pages/metrics-report';

class MetricsReportContainer extends Component 
  constructor(props) 
    super(props);
    this.generateReport = this.generateReport.bind(this);
  
  generateReport(metricsParams) 
    console.log(metricsParams);
  
  componentDidMount() 
  render() 
    return (
      <div>
        <MetricsReport generateReport=this.generateReport />
      </div>
    );
  


export default metricsReportContainer;

【问题讨论】：

绑定generateReport函数，就像你对getReportType所做的那样

ReactJS with ES6: this.props is not a function when I communicate two components的可能重复

我已经按照建议完成了：this.generateReport = this.generateReport.bind(this); 但仍然抛出同样的错误

我已经完成了类似的实现并且工作正常。请看一看。 codesandbox.io/s/kk89834r3o

【参考方案1】：

您忘记在子组件MetricsReport 中绑定上下文this：

// inside the constructor
this.generateReport = this.generateReport.bind(this);

但你可以简单地这样使用：

<button 
  onClick=this.props.generateReport(this.state.metricsParams)
>
  Generate Report
</button>

【讨论】：

仍然面临这个问题

【参考方案2】：

您可以使用匿名函数而不是普通函数来处理这些情况。匿名函数处理你的 this 并消除绑定的需要。

generateReport(metricsParams) console.log(metricsParams);

变成

generateReport = (metricsParams) => console.log(metricsParams);

也在子类中

generateReport() this.props.generateReport(this.state.metricsParams);

变成

generateReport = () => var metricsParams = this.state.metricsParams; this.props.generateReport(metricsParams);