javascript - 获取渲染元素的组件

Question

目前，我正在使用 React 制作一个模态系统。所以我在侧边栏中有一个按钮，我的模态是在正文中的 div。

我有两个组件在我的应用程序主要组件的渲染函数中渲染:

• 我的模态
• MyModalOpenButton

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

所以我基本上需要将 MyModal 的 ref 存储在 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
    }
}

Answer 1

您尚未分享您的代码，因此我无法为您提供与您的情况具体匹配的答案，但总的来说:

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