Невозможно передать значение от родителя к ребенку и от ребенка к родителю

Question

Прежде всего, это моя текущая структура

РОДИТЕЛЬСКИЙ КОМПОНЕНТ

    class Box extends Component {
        constructor(){
            super()
            this.state={
                isLoginOpen: true,
                isRegisterOpen: false
            }
        }

        showLoginBox() {
            this.setState({
                isLoginOpen: true, 
                isRegisterOpen: false
            });
        }

        showRegisterBox() {
        this.setState({
            isRegisterOpen: true, 
            isLoginOpen: false
        });
        }
        render() {
            return  <div class="container-fluid w-100 full_div">
                <div class="container shadow">
                    <br/>
                    <br/>
                    <div class="row bg-white">
                        <div className={"col-sm-6 "+ (this.state.isLoginOpen? "bg-secondary": "")} 
                        >
                            <a onClick={()=>{this.showLoginBox()}} class="login-tab text-dark" href="#"><p class="text-center font-weight-bold" style={{fontSize: '25px'}}>Login</p></a>


        </div>
                    <div className={"col-sm-6 "+ (this.state.isLoginOpen? "": "bg-secondary")}>
                        <a onClick={()=>this.showRegisterBox()} class="signup-tab text-dark" href="#"><p class="active text-center font-weight-bold" style={{fontSize: '25px'}}>Sign Up</p></a>
                    </div>
                </div>
                <div class="col-md-6">
                    {
                        this.state.isLoginOpen?
                        <LoginBox/>
                        : <RegisterBox/>
                    }
                </div>
     }
}

ДЕТСКИЙ КОМПОНЕНТ

class RegisterBox extends Component {
    render() {
        return  <div>
                     <p style={{marginTop: '40px'}}><a onclick="changeTab(this)" data-tab="login" className="login-tab text-dark" href="#">I already have an account</a></p> 
                    </div>;
    } 
}

Я хочу передать значение функции isLoginOpen, isRegisterOpen и showRegisterBox дочернему компоненту. И когда я нажал У меня уже есть ссылка учетной записи на дочерний компонент, я хочу изменить значение, которое я получаю для дочернего компонента с помощью реквизита, и отправить его обратно родителю. Как мне это сделать?

Answer 1

Аль Дункансон Но теперь возникает эта проблема: «props» не определен no-undef в RegisterBox.

Answer 2

Вы можете передать эти значения вашему дочернему компоненту с помощью реквизитов, подобных этому

<RegisterBox
  isLoginOpen={this.state.isLoginOpen}
  isRegisterOpen={this.state.isRegisterOpen}
  showRegisterBox={this.showRegisterBox}
/>

Затем вы можете вызвать свою функцию showRegisterBox() из дочернего компонента, как этот

onClick={() => props.showRegisterBox()}