javascript - 如何修复 React 中的 '_this4.props.handleExport' 错误

Question

我在子组件下的子组件中设置的父组件中使用了handleExport函数。但是，会出现以下错误，并且效果不佳。

_this4.props._handleExport is not a function

src/components/PrimaryItem.js

export default class PrimaryItem extends Component {
  render() {
    return (
      <Stage
        ref={ref => {
          this.props._handleExport(ref);
        }}
      >
      </Stage>
    );
  }
}

src/components/PrimaryContainer.js

import PrimaryItem from "./PrimaryItem";


<PrimaryContainer
  _handleExport={this._handleExport}
/>

src.App.js

import PrimaryItem from "./components/PrimaryContainer";

export default class App extends component {
  _handleExport = ref => {
    if (ref) {
      this.refStage = ref;
    }
  };
  render() {

  return(
  <PrimaryContainer 
    _handleExport={this._handleExport}
  />
  )
}
}

Answer 1

您可以像这样通过传递到子容器的 props 来冒泡请求。

// --- parent.js

import React, { Component, Fragment } from "react";
import { ChildComponent } from './containers/child'

export class ParentContainer extends Component {

  handleUpdate = () => {
    // whatever you want to do here
    console.log('I have been clicked from ChildContainer')
  }

  render() {
    return (
      <Fragment>
        <ChildComponent onUpdate={this.handleUpdate} />
      </Fragment>
    );
  }
}

// --- child.js

import React, { Component, Fragment } from "react";

export class ChildComponent extends Component {

  constructor(){
    super()
    console.log(this.props) // will show you the props you have access to pass into components.
  }

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