如何将组件传递给react js中的组件？

Question

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

<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

Answer 1

简单答案：使用this.props.children创建一个子组件。

更好的答案：签出此medium article on Component Nesting。或关于this.props.children

最佳答案：当然是堆栈溢出。 :) Why won't my nested React components render?

Answer 2

您可以使用子级道具通过子级组件传递子级组件。在这种情况下，

<EmailDrop>
  <AnotherComponent />
</EmailDrop>

[AnotherComponent是children的EmailDrop道具的一部分，因此，当您处理EmailDrop的组件逻辑时，实际上可以访问AnotherComponent并有条件地渲染它（如果存在）：] >

render() {
  const { children } = this.props;  

  return ( 
    <>
      {
        children 
         ? children 
         : <Buttons /> 
      }
    </>
  )
}