如何在 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