获取渲染元素的组件

debugcn 发表于 Dev

Xstoudi

目前，我正在使用React构建一个模态系统。因此，我在侧边栏中有一个按钮，而我的模式是主体中的div。

我有两个在应用程序主要组件的render函数中呈现的组件：

我的模态
MyModalOpenButton

这是我需要的：触发MyModalOpenButton的事件onClick时，我需要执行存储在MyModal组件中的函数。

因此，我基本上需要将MyModal的引用存储在var中。

我怎样才能做到这一点？

代码：

import * as ReactDOM from "react-dom";
import * as React from "react";

import { MyModal } from "./component/modal/my-modal";
import { SettingsButtons } from "./component/settings-buttons";
import { CustomComponent } from "./custom-component";

class App extends CustomComponent<{}, {}>{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <div className="sidebar">
                    <ul>
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                        <li>
                            3
                        </li>
                    </ul>
                    <SettingsButtons />
                </div>
                <div className="mainContent">

                </div>
                <footer>TODO</footer>
                <MyModal />
            </div>
        );
    }
}

const app: App = ReactDOM.render(<App />, document.querySelector("#root")) as App;

和

import * as ReactDOM from "react-dom";
import * as React from "react";

import { CustomComponent } from "./../../custom-component";
import { ButtonComponent } from "./button";

export class MyModalOpenButton extends ButtonComponent<{}, {}> {
    constructor() {
        super();
    }

    render() {
        return (
            <li id="open-button" onClick={this.onClick}>
                <i className="fa fa-plus" aria-hidden="true"></i>
            </li>
        );
    }
    onClick(event: React.MouseEvent<HTMLElement>) {
        // Should open the modal
    }
}

尼桑·托默尔

您尚未共享代码，因此我无法为您提供具体符合您情况的答案，但总的来说：

class MyModal extends React.Component<any, any> {
    public render() {
        ...
    }

    public onButtonClick() {
        ...
    }
}

interface MyModalOpenButtonProps {
    onClick: () => void;
}
class MyModalOpenButton extends React.Component<MyModalOpenButtonProps, any> {
    public render() {
        return <button onClick={ this.props.onClick } />
    }
}

class Main extends React.Component<any, any> {
    private myModal: MyModal;

    public render() {
        return (
            <div>
                <MyModalOpenButton onClick={ this.onButtonClick.bind(this) } />
                <MyModal ref={ modal => this.myModal = modal } />
            </div>
        );
    }

    private onButtonClick() {
        this.myModal.onButtonClick();
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。