Reactjs 如何在父函数中重写子函数，

许多组件都在使用

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 &&
                        <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 &&
                        <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>
            )
        }
    }

从“React”导入React；
export const PanelStat=React.createContext（）；
类面板扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggleReload=（）=>{
if（this.state.reload！==true）{
this.setState（state=>({
重新加载：正确
}));
if（props.CallMyCustomFunction）
props.CallMyCustomFunction（）的
设置超时（（）=>{
this.setState（state=>({
重新加载：false
}));
}, 2000);
}
}
此.state={
重新加载：false，
toggleReload:this.toggleReload，
}
}
render（）{
返回(
{（！this.state.remove）&&
{this.props.children}
)}
);
}
};
类PanelHeader扩展了React.Component{
render（）{
返回(
{this.props.children}
{（！this.props.noButton）&&
{（{toggleReload}）=>(
)}
)}
)
}
}

父组件：

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>
  );
};

从“React”导入React；
从“../../components/Panel/Panel”导入{Panel，PanelHeader}；
导出默认值（）=>{
返回(
{alert（“调用此！！”）}>Anket Listesi
);
};

---

当然，它不起作用，我怎样才能做到这一点呢？

将函数传递给

面板

组件，因为它将

调用我的自定义函数

道具传递给子

面板标题

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

{alert（“调用此！！”）}>
李斯特脚镯

将函数传递给

面板

组件，因为它将

调用MyCustomFunction

道具传递给子

面板标题

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

{alert（“调用此！！”）}>
李斯特脚镯

您正在将

CallMyCustomFunction

传递给

PanelHeader

而不是使用该道具的

Panel

。您正在将

CallMyCustomFunction

传递给

PanelHeader

而不是使用该道具的

Panel

。