React.js如何正确实例化父类中的子组件

Question

我对反应很陌生。js和我一直在研究一个组件类（子类），该类具有函数和单个状态对象，我的最终目标是在父类中使用该类，以便它可以调用其函数并更新状态。

我遇到的问题是：

1. 我不知道组件的生命周期，并且
2. 我有着深厚的文化背景

意思：我一直像对待任何C#类而不是JavaScript一样对待这些组件类。我现在知道了。

但我需要帮助评估我的方法并解决我一直看到的这个问题：

这是我的子类组件

从“React”导入React，{Component}；从“axios”导入axios；

export default class ClassB extends Component {
    constructor() {
        super();

        console.log("ClassB constructor got called");

        this.state = {
            users: [{ name: '', email: '' }]
        };
    }

    getUsers() {
        let URL = "https://localhost:5001/api/FooController/FooAction"
        let myParam = 100;

        axios.get(URL,
            {
                params: { myParam }
            })
            .then(response => {
                // handle logic here...

            }).catch(function (error) {
                console.log('What happened? ' + error.response.data);
            });
    }

    addUserData(name, email) {
        this.setState(this.state, { users: [name, email] });
    }

    componentDidMount() {
        console.log("ClassB componentDidMount got called");     
    }

    render() {
        console.log("ClassB render got called");
        return ( null )
    }
}

在我的父类（Home.js）中，我实例化了子类（ClassB.js）并使用其实例：

import React, { Component } from 'react';
import ClassB from './ClassB'
import ClassC from './ClassC'

const classBComponent = new ClassB();

export class Home extends Component {
    static displayName = Home.name;
    

    constructor() {
        super();

    }

    componentDidMount() {
        this.timerID = setInterval(() => {
            classBComponent.getUserValues();
        }, 3000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    render() {

        myComponent.render();

        return (
            <div className="container">
                <h1>My Other Component:</h1>
                <div className="row">
                    <div className="col-sm">
                        <ClassC name={[{ component: classBComponent, info: ['John', '[e-mail]'] }]} />
                    </div>
                </div>
            </div>
        );
    }
}

在这个父类中，我打算从ClassB组件中调用“getUserValues（）方法。我还有另一个子组件（ClassC），它是一个功能组件，我想传递实例化的ClassB组件，以便它也可以访问其函数和状态。但是，在ClassC组件中，当我调用“addUserData（）”方法时，它给出了我在上面粘贴的错误（见图）。

下面是我如何设置ClassC的：

import React, { useEffect } from 'react';
import axios from 'axios';

const ClassC = (props) => {

    // variables
    let user  = props.name[0].info[0];
    let email = props.name[0].info[1];

    // component
    const component = props.name[0].component;


    // renders component
    function componentMount() {
        component.addSimModelNodeInfo(user, email);
    }

    // leaves the component
    function componentUnmount() {       

    }

    useEffect(() => {
        componentMount();
        return () => {
            componentUnmount();
        }
    }, [])

    return (
        <div className="card shadow-sm p-3 mb-5 bg-white rounded">
            <div className="card-header">
                <h5>{name}</h5>
                <h5>{email}</h5>
            </div>          
        </div>
    );
}

export default ClassC;

我之前提到过，我对组件的生命周期没有很好的把握。我放了那些控制台。登录ClassB只是为了意识到唯一被调用的方法是构造函数。componentDidMount（）函数从未被调用，render（）也从未被调用。为什么？我知道它与那个错误有关，这就是为什么我的ClassB组件从来没有“挂载”过。我做错了什么？非常感谢。

Answer 1

下面是从子组件调用父组件函数的示例。为了简洁起见，我使用了函数组件，但这在基于类的情况下也是完全可能的。

如果你不熟悉功能组件，你可以考虑像这样的道具。props，函数本身类似于类组件中的render（）方法。还有更多内容，但对于这个小例子，如果你需要翻译，它应该会帮助你。

const ChildComponent = (props) => <button onClick={props.onClick} />

const ParentComponent = () => {
  const onClick = () => {
    console.log("Click Clack");
  }
  return <ChildComponent onClick={onClick} />;
};