Question

我创建了一种密码表单，该表单需要将值传递给位于另一个js中的一个变量。

范围是：

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

App.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>
);

Login.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 ";

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

Answer 1

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

，如果您不想使用Redux，则必须在主根组件（通常是App.js）内部创建函数，并使用prop在子组件内部传递这些函数，子组件将传播将值传递给根组件，或者您可以在子组件内部创建函数，并将值传播到根组件（取决于每个组件的用例，例如是否要对一个组件或所有组件执行此功能）< / p>

要重用这些值，您可以将根组件的状态作为props传递给子对象

希望我的回答有所帮助

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

1 个答案: