如何在 react componentDidMount 中从 child 调用 parent 方法

Question

我无法在 componentDidMount 之外使用我的 threejs 方法进行反应。但是我需要在该组件 (child) 内部使用 parent 方法，我需要它来对 THREE.js objects 进行操作。有什么方法可以在 child 函数的 componentDidMount?

中获取和使用 parent 方法

我在parent中这样试过：

import logo from './logo.svg';
import './App.css';
import Canvas from './Canvas';
import * as THREE from 'three';

function App() {
  function Hi (){
    console.log("POOP");
  }
  return (
    <div className="App">
    <h1>this is the story of a man</h1>
    <Canvas hi={Hi()}/>
        </div>
  );
}

export default App;

在 child 中也是如此：

import './App.css';

import * as THREE from 'three';
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader';

export default class CanvAs extends React.Component{
    constructor(props){
        super(props)
    }

    componentDidMount(){
        const hi = this.props;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
let mixer;
let mixer2;
let player;
let Enemy;
let EnemyPositionZ;
let EnemyPositionX;
let playerPositionX;
let playerPositionZ;
var x = 0;
// var geometry, material, mesh;

init();
animate();
animate2();

//enemyAI();


function init() {
    this.props.hi();

    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.z = 20;
    camera.position.y = 1;
    camera.scale.z = 10;
    . . .

有什么想法吗？ :O

Answer 1

import React from "react";

class Canvas extends React.Component{
  init(){

    console.log("okay",this.props)
    this.props.hi() //calling the hi function
  }
  render(){
    console.log("props",this.props)
    return(
      <>
      <div>i am the child comp</div>
      </>
    )
  }
  componentDidMount(){
    console.log("in compdMount",this.props.hi)
    this.init()
  }
}
export default Canvas

在 react class 中你不需要像 function init(){} 那样声明一个函数，你可以简单地通过声明 init(){} 或 init=()= >{}

如何在 react componentDidMount 中从 child 调用 parent 方法

How to call the parent method from child in react componentDidMount

reactjs

react-component