如何将组件传递给React JS中的组件?

我想要做的是传入另一个组件,该组件将使用此语法替换按钮。

<EmailDrop>
   <AnotherComponent />
</EmailDrop>

我想一定有一种方法可以做到这一点,但我甚至很难知道要用谷歌找到什么。我是否可以将函数作为道具传递给它?

我觉得我缺少一些非常基本的东西。

import React, { Component } from 'react';

class EmailDrop extends Component {
    constructor() {
        super();

        this.state = {
            showMenu: false,
        };

        this.showMenu = this.showMenu.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
    }

    showMenu(event) {
        event.preventDefault();

        this.setState({ showMenu: true }, () => {
            document.addEventListener('click', this.closeMenu);
        });
    }

    closeMenu(event) {

        if (!this.dropdownMenu.contains(event.target)) {

            this.setState({ showMenu: false }, () => {
                document.removeEventListener('click', this.closeMenu);
            });

        }
    }

    render() {
        return (
            <div>
                <button onClick={this.showMenu}>
                    Show menu
                </button>

                {
                    this.state.showMenu
                        ? (
                            <div
                                className="menu"
                                ref={(element) => {
                                    this.dropdownMenu = element;
                                }}
                            >
                                <button> Menu item 1 </button>
                                <button> Menu item 2 </button>
                                <button> Menu item 3 </button>
                            </div>
                        )
                        : null
                }
            </div>
        );
    }
}

export default EmailDrop