如何在 React JS 中的两个子组件之间传输数据？

Question

实际上，我正在创建一个前端，在其中我将手机号码作为第一页的输入，然后在检查手机号码后我将转到 OTP 页面。在 OTP 页面中，我将 otp 作为输入，并且必须将 otp 和手机号码发送到后端。我可以通过 otp，但不知道如何通过手机号码，因为我已将其作为上一页的输入。

这是注册组件，它将接受手机号码输入

import React from 'react';

import './Signup.css';

class Signup extends React.Component {

    constructor(props){

        super(props);

        this.state={

            mobile:''

        }

    }

    onMobileChange = (event) => {

        this.setState({mobile: event.target.value})

    }

    onSubmitSignup = () => {

        fetch('https://cors-anywhere.herokuapp.com/http://8080/signup/checkMobile',{

            method:'post',

            headers:{'Content-Type':'application/json'},

            body: JSON.stringify({

                mobile:this.state.mobile

            })

        })

        .then(response => response.json())

        .then(data =>{

            if(data.content === 'OK'){

                this.props.loadNewUser(this.state.mobile);

                this.props.onRouteChange('otp','nonav');

            }

        })

        // this.props.onRouteChange('otp','nonav');

    }

    render(){

        const { onRouteChange} = this.props;

        return(

            <div className='container'>

                <div className='mt6'>

                    <img src={require('./logo.png')} className='logoimg' alt='logo'/>

                </div>

                <h3 className='text-center b' style={{font:"Montserrat"}}>FOODVIRAAM</h3>

                <div>

Answer 1

使用localStorage或Cookies将您的电话号码存储在一页和下一页上，您可以通过您选择的任何媒体轻松检索数据。由于存储在其中任何一个上都会保留您的数据，因此您无需担心页面的意外刷新。不要使用Reduxor Context API，因为它们不会保留数据。例子 ：-使用本地存储 API// storing the phone number on your first page.localStorage.setItem('$$NAMESPACE__phone_number', phoneNumber)// getting the phone number on your second.const phoneNumber = localStorage.getItem('$$NAMESPACE__phone_number')

Answer 2

使用 Redux 它有点复杂但是当你需要从孩子向父母传输数据时使用它，你还可以获取你通过道具发送给孩子的数据并获得返回值https://redux.js.org