this.props.x 不是一个函数，即使 x 是绑定的.反应.js

Question

我想在单击btn_genReport并触发generateReport()时传递要从componentA传递到componentB的metricsParams。但它抛出错误Uncaught TypeError: this.props.generateReport is not a function

componentA (metrics-report.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.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>
</select>
<button id="btn_genReport" onClick={this.generateReport}>Generate Report</button>
</div>
)
}
}
export default MetricsReport;

componentB (metrics-report-container.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(metricsParam) {
console.log('???:', metricsParam);
}
componentDidMount() {
}
render() {
return(
<div>
<MetricsReport generateReport={this.generateReport}/>
</div>
)
}
}
export default metricsReportContainer;

Answer 1

是错别字吗？

export default metricsReportContainer; // it should be MetricsReportContainer

万一不是错别字。我已经检查了您的代码，我可以说您的代码完全没问题，效果很好。

这是演示：https://codesandbox.io/s/zrm8r6x6m4

我的意思是，父组件和子组件之间的通信是以正确的方式实现的，没有错。

这是我用来检查您的实现的最小代码。

---

指标报告容器.js

import React, { Component } from "react";
import MetricsReport from "./MetricsReport";
class MetricsReportContainer extends Component {
constructor(props) {
super(props);
this.generateReport = this.generateReport.bind(this);
}
generateReport(metricsParams) {
console.log(metricsParams);
}
render() {
return (
<div>
<MetricsReport generateReport={this.generateReport} />
</div>
);
}
}
export default MetricsReportContainer;

---

指标报表.js

import React, { Component } from "react";
class MetricsReport extends Component {
constructor(props) {
super(props);
this.state = {};
this.generateReport = this.generateReport.bind(this);
}
generateReport() {
this.props.generateReport("Hello World!");
}
render() {
return (
<div>
<button onClick={this.generateReport}>Generate Report</button>
</div>
);
}
}
export default MetricsReport;

Answer 2

我的错。我首先调用子组件而不是父组件。