在反应路由器中单击链接时回调不起作用

Question

我一直在尝试从子组件 A 向父组件 C 发送回调，以在父组件 C 中设置状态！此状态将发送到另一个子组件 B。我在 A 中有一个链接组件，它调用 B 中的组件，但子组件需要来自父组件的状态，当我单击 A 中的链接时，没有调用 Back但我希望它被调用。

Class C extends react.Component
{
    constructor(props: any)
    {
        super(props);
        this.state={
        somestate: '',
        }
    }
    CallBack(somestate:string)
    {
        this.Setstate({somestate, somestate},()=>{console.log(this.state.somestate);});
    }
    render()
    {
        return( 
            <A CallBack={this.CallBack} />
            <Route path='/somestate' >
            <B somestate={this.state.somestate} />
            </Route>

        )
    }
}
Class A extends React.Component
{
    constructor(props: any)
    {
        super(props);
    }
    callback()
    {
        this.props.CallBack();//causing errror when i click Link tag
    }
    render()
    {
        return(
        <Link to='/somestate'>
            <button onClick={this.callback()}>click me</button>
        </Link>
        )
    }
}
Class B extends React.Component
{
    constructor(props: any)
    {
        super(props);
    }
    render()
    {
        return(
        <div>
            this.props.somestate;
        </div>
        )
    }
}

我无法在道具中回调。我猜我们不能同时使用回调父和链接。那么如何实际使用呢。

Answer 1

根据React Router documents，您应该将 onClick 等其他道具传递如下：

<Link to="/somestate" onClick={this.callback} className="some-classname">Click me</Link>

您还可以传递 className 以便根据需要调整链接。