时间戳

首页 > 解决方案 > 将 this.props.history.push 传递给另一个组件的一个变量中的属性。反应 JS

reactjs - 将 this.props.history.push 传递给另一个组件的一个变量中的属性。反应 JS

问题描述

我创建了一个密码表单，需要将值传递给另一个 js 中本地化的一个变量。

范围是：

App.js
|
|
|----- Login.jsx
|
|
|_____ Home.jsx
         |----- import { getMarvelCharacters } from '../lib/apiCalls';

应用程序.js


const Home = lazy(() => import('./Components/Home'));
const Login = lazy(() => import('./Components/Login'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/home" component={Home}/>
      </Switch>
    </Suspense>
  </Router>
);

登录.jsx


    handleSubmit = event => {
    //The alert show both value ok..
        alert('publickey is: ' + this.state.publickey + ' and privatekey is: ' + this.state.privatekey);
        event.preventDefault();
        try {
            this.props.history.push({
                pathname: '/home',
                state: {
                    publickey: this.state.publickey,
                    privatekey: this.state.privatekey,
                }
            })
        } catch (e) {
            alert(e.message);
        }
    }

但我需要将这些值放入 apiCalls.js

const PUBLIC_KEY = " here ";
const PRIVATE_KEY = " here ";

请问，最好的制作方法是什么

标签： reactjsreact-router

解决方案

您可以使用 Redux 将数据从您的登录组件推送到 redux 存储，并在应用程序内部的另一个组件中使用它

如果你不想使用 Redux，那么你必须在主根组件（通常是 App.js）中创建函数，并使用 props 在子组件中传递这些函数，子组件会将值传播到根组件，或者您可以在子组件内部创建函数并将值传播到根组件（取决于每个组件的用例，例如该功能是针对一个组件还是所有组件完成）

要重用这些值，您将根组件的状态作为子组件内部的道具传递

希望我的回答有点帮助

推荐阅读