在 reactjs 中想要基于子 state 更新父 state？

Question

在 reactjs 中，我想根据子 state 更新父 state。 我在登录中的父组件。 我想要孩子 state 在Login组件角色 function

//this function to show link //
function GetLink(props) {
    const { role } = props
    let admin = <Link to='/Admin'>Admin</Link>
    let f = <Link to='/Finance'>Finance</Link>
    let s = <Link to='/Sales'>Sales</Link>

    switch (role) {
        default:
        case "admin": return (
            <>
                {admin}
                {f}
                {s}
            </>
        )
        case "finance": return (
            <>
                {f}
                {s}
            </>
        )
        case "sales": return (
            <>
                {s}
            </>
        )
    }
}

//this is the parent component //
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            role: ""
        }
    }

    //want this state to be update when child state is updated
    role = () => {
        this.setState({ role:  });
    }

    render() {
        return (
            <>
                { this.state.role === "admin" }
                <GetLink role={localStorage.getItem("role")} />
            </>
        );
    }
}

现在这是我的子组件，其中 state 在componentDidMount中更新

//this is child component //
//the state is updating in this component //
class Sales extends Component {
    constructor(props) {
        super(props);
        this.state = {role: "" }
    }

    componentDidMount() {
        if (localStorage.getItem("role") === null) {
            this.props.setState({ role: localStorage.setItem('role', 'sales') })
        }
    }

    logout() {
        localStorage.removeItem('role');
    }

    render() {
        return (
            <>
                <h1>Sales</h1>
                <button onClick={this.logout}>logout</button>
            </>
        );
    }
}

export default Sales;

谁能帮我解决这个问题？

Answer 1

我认为这是发送 function 作为道具的最佳方式。

<GetLink role={this.role} />