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

Question

I use a handleExport function in the parent component set in a child under child component. However, the error below occurs and that would not work well.

_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

You can bubble up requests through props passed into child containers like so.

// --- 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>
    );
  }
}