Question

我一直在尝试从子组件A发送回父组件C的调用，以在父C中设置状态！此状态将被发送到另一个子组件B。我在A中有一个链接组件，该链接组件在B中调用该组件，但是子组件需要父组件的状态，并且当我单击A中的链接时，不会调用回叫。但我希望它被称为。

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以便根据需要调整链接的形状。

在React Router中单击Link时回叫不起作用

1 个答案: