Question

我们可以轻松地将数据作为道具从父组件发送到子组件，但是如果两个组件之间没有关系怎么办？

请先阅读我的背景信息，以便我可以轻松地理解我的问题。

在我的电子商务React App中，当任何新用户访问我的网站时，我都建议该用户进行注册。在注册过程中，我保持两个步骤。

首先，我只想从一个输入字段中获取他的手机号码。当他填写该字段并按“继续”按钮-
我想带他到另一个页面（组件），从中可以输入他的名字，密码等。

这两个组件相互独立。当用户点击“继续”按钮时，我正在呼叫a并将其重定向到另一个组件。

现在我的问题是我如何在第一部分中保留此手机号码并发送到第二部分

[注：我不希望在拨打第二条路线时在网址中看到手机号码]

第一个组件

export default class FirstComponent extends Component {
    render() {        
        return (
            <div>                
                <input type="text" placeholder="Type Mobile number" />
                <Link to={{ pathname: '/signup' }}>
                    <button>Continue</button>
                </Link>
            </div>
        )
    }
}

第二部分

export default class SecondComponent extends Component {
    render() {        
        return (
            <div>       
                <input type="text" placeholder="Type Mobile number" />

            </div>
        )
    }
}

路由器

<Route exact path="/signup" render={(props) => {return <SecondComponent />} }/>

Answer 1

您可以这样做：

<Link to={{ pathname: '/signup', state: { number: 3199192910} }}>
                    <button>Continue</button>
                </Link>

您可以在注册组件中访问它，例如：

import {withRouter} from 'react-router';

 class SecondComponent extends Component {
    render() { 
      // get the number 
      console.log(this.props.location.state.number)

        return (
            <div>       
                <input type="text" placeholder="Type Mobile number" />

            </div>
        )
    }
}

export default withRouter(SecondComponent);

请查看以下示例，Quotes是您要查看的内容：

Answer 2

点击按钮后，您可以调用handleClick函数，并且可以在此函数内使用push方法发送道具。这样，您可以更好地控制要将数据发送到其他组件的表示形式。

<button onClick={this.handleClick}>continue</button>

handleClick = () => {
    this.props.history.push({
      pathname: '/signup',
      state: { mobile: this.state.mobileNumber }
    })
}

希望有帮助！

Answer 3

这是Redux进入图片的地方。

Redux是用于管理应用程序状态的开源JavaScript库。

因此，在redux中发生了什么，我们有了一个称为store的东西来管理应用程序的整个状态。
我们将一些动作分配给store，该动作调用了一个称为reducer的函数，该函数根据已经执行的动作来改变store中的数据。派遣。如果您不明白我说的话，请不要担心

只需观看15分钟的视频，您将完全了解如何在应用程序中使用Redux并解决问题
https://www.youtube.com/watch?v=sX3KeP7v7Kg

为了深入学习，我建议您阅读
https://redux.js.org/basics/basic-tutorial

现在回到您的问题，您所要做的就是创建一个存储电话号码的商店，当用户单击“继续”按钮时，将一个动作分配给reduce以存储电话号码，因此您的电话号码会在整个过程中持续存在。应用程序，只要您想访问手机，只要编写mapstatetoprops函数即可，该函数如视频中所示，可以从商店访问数据并在该组件中使用

希望这能解决您的问题

不使用redux时会发生什么当然，您将数据作为道具发送，但是刷新页面时道具会发生什么变化！!!! 道具丢失，但是当我们使用redux时，我们可以保存数据。当然，即使刷新后，您的应用程序仍能按预期工作，

当url调用第二个组件时，如何将prop从当前组件传递到另一个组件？

3 个答案: