如何在不渲染组件的情况下仅将其功能传递给另一个组件

我是React的新手,我想让组件的按钮通过在另一个组件中调用一个函数来打开常规模式。最终,我希望导航栏上有一个按钮,引导卡上有一个按钮,当单击它时,它将在单独的组件中打开一个模式。我尝试使用ref = {},但我不明白我希望他们是另一种方式。这是我的简单代码,我希望其中的ClickButton.js中的按钮打开Header.js中的Modal。移交ClickButton父对象时,必须添加它,并添加两个按钮。我如何只获取CLickButton.js的按钮来访问Headerjs中的切换功能。而不导致呈现两个按钮,如下所示?

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import Header from './Header';

class ClickButton extends Component {

  constructor(props) {
    super(props);

    this.state = {

    };
  }

  onClicker = (props) => {
   this.props.toggleModal(); 
  }
  render( ) {
    return (
      <div>
        <Button onClick={this.onClicker} color="primary">OtherComponentButton</Button>
      </div>
    );
  }
}

export default ClickButton;

这是模态

import React, { Component } from "react";
import { Button, Modal, ModalBody, Form, FormGroup,Label,Input} from "reactstrap";
import ClickButton from './ClickButton';

class Header extends Component {
  constructor(props) {

    super(props);

    this.state = {

      modal: false

    };
  }
  toggle = () => {

    this.setState({

      modal: !this.state.modal

    });

  }
  render() {
    return (
      <div>
        <Modal isOpen={this.state.modal}>
          <ModalBody>
          <Form>
      <FormGroup>
        <Label for="exampleEmail">Name</Label>
        <Input type="email" name="email" id="exampleEmail" placeholder="Enter Name" />
      </FormGroup>
            </Form>

          </ModalBody>
          <Button onClick={this.toggle}>Close</Button>
        </Modal>
          <Button onClick={this.toggle}>ModalComponent</Button>

          <ClickButton toggleModal={this.toggle} />

      </div>
    );
  }
}

export default Header;

这是显示两个按钮的图像。我如何只显示一次CLickButton按钮。

Dual buttons