Блог

Существует PanelHeader компонент, используемый многими компонентами, он содержит значок обновления, который запускает его функцию: this.toggleReload ,

Это просто перезагружает содержимое, я хочу передать функцию из родительского компонента и выполнить в нем; ( CallMyCustomFunction )

panel.jsx:

 import React from 'react';

    export const PanelStat = React.createContext();
    
    class Panel extends React.Component {
        constructor(props) {
            super(props);
   
            this.toggleReload = () => {
                if (this.state.reload !== true) {
                    this.setState(state => ({
                        reload: true
                    }));
                    if (props.CallMyCustomFunction)
                        props.CallMyCustomFunction()
    
                    setTimeout(() => {
                        this.setState(state => ({
                            reload: false
                        }));
                    }, 2000);
                }
            }
    
            this.state = {
                reload: false,
                toggleReload: this.toggleReload,
            }
        }
        render() {
            return (
                <PanelStat.Provider value={this.state}>
                    {(!this.state.remove amp;amp;
                        <div className={'panel panel-'   (this.props.theme ? this.props.theme : 'inverse')   ' '   (this.state.expand ? 'panel-expand ' : ' ')   (this.state.reload ? 'panel-loading ' : ' ')   (this.props.className ? this.props.className : '')}>
                            {this.props.children}
                        </div>
                    )}
                </PanelStat.Provider>
            );
        }
    };
    
    class PanelHeader extends React.Component {
        render() {
            return (
                <div className="panel-heading">
                    <h4 className="panel-title">{this.props.children}</h4>
                    {(!this.props.noButton amp;amp;
                        <PanelStat.Consumer>
                            {({ toggleReload }) => (
                                <div className="panel-heading-btn">
                                    
                                    <button className="btn btn-xs btn-icon btn-circle btn-success" onClick={toggleReload}><i className="fa fa-redo"></i></button>
                                    
                                </div>
                            )}
                        </PanelStat.Consumer>
                    )}
                </div>
            )
        }
    }
  

родительский компонент:

 import React from "react";
import { Panel, PanelHeader } from "../../components/panel/panel";

export default () => {
  return (
    <div>
      <Panel>
        <PanelHeader CallMyCustomFunction={()=>{alert("Call This!!")}} >Anket Listesi</PanelHeader>
      </Panel>
    </div>
  );
};
  

Конечно, это не работает, как я могу этого добиться?

Передайте функцию Panel компоненту, поскольку он передает CallMyCustomFunction prop дочернему PanelHeader элементу .

 <Panel CallMyCustomFunction={()=>{alert("Call This!!")}>
   <PanelHeader>Anket Listesi</PanelHeader>
</Panel>