React: Usar método de outra Classe

Boa tarde, Denis! Como vai?

Se vc tem 2 botões em lugares (componentes) diferentes sendo que ambos terão o mesmo comportamento, então esse botão é um ótimo candidato a se tornar um componente!

Então, a boa prática aqui é vc transformar o seu botão num componente e na classe desse novo componente, vc define o comportamento que deseja que ele tenha.

Pegou a ideia?

Grande abraço e bons estudos!

Bom dia, Usei esse código como exemplo. Mas na aplicação real eu tenho uma Navbar:

import React, { Component } from 'react';
import { Button,Fa, Card, CardText, Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';

import Front from '../Front';
import logo from '../imagens/mfaclogo-min.png';
import whatsapp from '../imagens/whats-min.png';
import skype from '../imagens/skype-min.png';
import phone from '../imagens/phone-min.png';

export default class NavbarPage extends Component {
    constructor(props) {

        super(props);
        this.state = {
            collapse: false,
            isWideEnough: false,
            dropdownOpen: false,
            accordion: false
        }
    }
    deslogar = () => {
        sessionStorage.clear();
        window.location.href = Front;
    }
    fazerLogoff = () => {
        sessionStorage.clear();
        window.location.href = Front;
    }
    toggle = () => {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }
    onClick1 = () => {
        let state = '';

        if (this.state.accordion !== 1) {
            state = 1;
        } else {
            state = false;
        }

        this.setState({
            accordion: state
        });

    }
    onClick = () => {
        this.setState({
            collapse: !this.state.collapse,
        });
    }
    openSid = () =>{
        SidbarPage.handleToggleClickA();
    }

    render() {
        const button1 = <a href="#" onClick={this.openSid} key="sideNavToggleA"><Fa icon="bars" size="5x"></Fa></a>
        const divstyle = {width: "50%", display: "inline-block"}
        return (
            <Navbar id="navbar" color="trasnpartent" dark expand="md" scrolling className="">
                <NavbarBrand className="col-xl-2 col-6">
                    <strong> <img className="img-fluid" alt="logo" src={logo}></img></strong>
                    <div className="text-center" style={divstyle}>
                        {button1}
                    </div>
                </NavbarBrand>
                <div className="d-none lg-block">
                    {!this.state.isWideEnough && <NavbarToggler onClick={this.onClick} />}
                </div>
                <Collapse isOpen={this.state.collapse} navbar />
                <NavbarNav right className="d-none d-lg-block">
                    <NavItem>
                        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                            <DropdownToggle nav caret><Button color="primary">Suporte</Button></DropdownToggle>
                            <DropdownMenu>
                                <DropdownItem><Button href="http://url/arquivos/AcessoRemoto.exe" color="primary" className="btn-block"><b className="white-text">Acesso remoto</b></Button></DropdownItem>
                                <DropdownItem><img alt="whats" src={whatsapp} /> ()  -</DropdownItem>
                                <DropdownItem><img alt="phone" src={phone} /> () </DropdownItem>
                                <DropdownItem><img alt="phone" src={phone} /> () </DropdownItem>
                                <DropdownItem><img alt="skype" src={skype} />url.net</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </NavItem>
                </NavbarNav>

                <NavbarNav right>
                    <NavItem>
                        <Button onClick={this.deslogar} color="warning">Sair</Button>
                    </NavItem>
                </NavbarNav>

                <Collapse isOpen={this.state.accordion === 1}>
                    <Card>
                        <CardText><img alt="whats" src={whatsapp} /> ()-</CardText>
                        <CardText><img alt="phone" src={phone} /> ()-</CardText>
                        <CardText><img alt="phone" src={phone} /> ()-</CardText>
                        <CardText><img alt="skype" src={skype} /> atendimento@url.net</CardText>
                    </Card>
                </Collapse>
            </Navbar>

        );
    }
}

Essa Navbar terá um Button que quando clickado abrira a Sidenav.

Porem a Sidnav não esta no mesmo arquivo que a Navbar, quero deixar eles separados pois são componentes diferentes.

Então eu precisava puxar a função que ativa o Collapse da Sidenav no Button que esta na Navbar.

Boa tarde, Denis! Como vai?

Me perdoe pela demora na resposta, estava enrolado com algumas coisas! Mas voltando ao assunto, acho que vc não deve ter entendido minha sugestão, então vou tentar me explicar melhor.

A ideia é vc manter separados os componentes Sidnav e Navbar, no entanto, remover o tal botão de dentro da NavbarPage e criar um componente específico para esse botão! Afinal de contas, como ele tem um comportamento específico e pelo que entendi vc só quer colocar ele em mais de um lugar no seu sistema, então essa é a melhor estratégia a ser empregada.

Daí, vc teria no final um componente Sidenav, outro Navbar e um terceiro para o botão!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!