如何将状态从子组件传递到应用程序组件答案

【问题标题】：How to pass a state from the child to app component如何将状态从子组件传递到应用程序组件
【发布时间】：2020-03-24 14:01:21
【问题描述】：

我有 2 个组件，它们都有子组件，在其中一个组件中，如果单击子组件，我想将其传输到应用程序组件，以便它为我呈现一个全新的组件

我想使用```使用状态`，但我打算从哪里开始呢。我将显示我开始但阻止如何继续的代码

app.jsx

import React, { useState, useEffect } from 'react';
import './App.css';
import SignIn from './components/sign-in/SignIn';
import SignUpOptions from './components/sign-in/sign-up-select-business-option';

const [signUp, setSignUp] = useState(false);

const App = () => {
  if (signUp) {
    return <SignUpOptions/>
  }
    return <SignIn/>

};

export default App;

signin.jsx

const SignIn = () => (
<div style={{display:'flex'}}>
  <div style={{flex:2}}>
    <ImageDiv bg={signin} src = {signin} alt="logo">
      <LogoDiv src={logo} alt="logo" />
    </ImageDiv>
  </div>
  <FormDiv>
    <Input style={{marginTop: `${44  }px`}} placeholder="Username" />
    <Input style={{marginTop: `${44  }px`}} placeholder="Password" />
    <Button style={{marginTop: `${45  }px`}}>Sign in</Button>
    <ForgotPassword>Forgot username or password</ForgotPassword>
    <SignUpParagraph>Don’t have an account? Sign up</SignUpParagraph>
  </FormDiv> 
</div>
)

export default SignIn;

所以在登录时，如果我按下我想要加载 app.jsx 中的内容

【问题讨论】：

所以当他们点击 ssignUpPargrah 时，您想将他们发送到 signUp.jsx 吗？
ReactJS Two components communicating的可能重复
你看过 react-router 吗？您不会真正传递状态，状态是组件本地的，或者由状态管理库处理的应用程序状态（尽管两者都不适合您当前的问题，路由机制可能是）
另一个 possible duplicate 可能会有所帮助（不太通用，专注于 2 个解决方案）
那么，how to navigate in React using react-router

标签： javascript reactjs

【解决方案1】：

由于你是新人，我不会给你重复链接

app.jsx

const [signUp, setSignUp] = useState(false);

const App = () => {
  if (signUp) {
    return <SignUpOptions/>
  }
    return <SignIn setSignUp={setSignUp}/>

};

signin.jsx

const SignIn = (props) => (
<div style={{display:'flex'}}>
  <div style={{flex:2}}>
    <ImageDiv bg={signin} src = {signin} alt="logo">
      <LogoDiv src={logo} alt="logo" />
    </ImageDiv>
  </div>
 <FormDiv>
    <Input style={{marginTop: `${44  }px`}} placeholder="Username" />
    <Input style={{marginTop: `${44  }px`}} placeholder="Password" />
    <Button style={{marginTop: `${45  }px`}}>Sign in</Button>
    <ForgotPassword>Forgot username or password</ForgotPassword>
    <SignUpParagraph setSignUp={props.setSignUp}>Don’t have an account? Sign up</SignUpParagraph>
  </FormDiv>

SignUpParagraph.js

const SignUpParagraph = (props) => (
<div onClick={()=>props.setSignUp(true)}>//anything you have in here </div>

如果成功了评论一下

【讨论】：

但是，重复问题的重复链接是正确的行为，可以避免过于混乱。
对不起伙计们，是的，确实有效，我谢谢你，下次我会更深入地寻找我的答案

【解决方案2】：

虽然你已经找到了答案，但我仍然可以在途中给你另一种方法。

使用 React Context，您可以在 index/app.js 中创建函数并使用您的子组件调用它们。这是一个轻量级的替代方案，效果很好，也可以使用钩子。

问候

【讨论】：