javascript - 如何将状态从子级传递到应用程序组件(How to pass a state from the child to app component)

Question

I have 2 components which both have sub components, In one of the components if the sub component is clicked I want to transfer that to the app component so it renders a totally new Component for me(我有2个组件，每个组件都有子组件，在其中一个组件中，如果单击了子组件，我想将其转移到应用程序组件，以便为我呈现一个全新的组件)

I want to use ```use state`` but where am I meant to start it.(我想使用“使用状态”，但是我打算从哪里开始。)

I will show code of what I started but blocked on how to continue(我将显示我开始但已阻止继续的代码)

app.jsx(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(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;

So in signin if I press i want the in app.jsx to load(所以在登录时，如果我按，我希望在app.jsx中加载)

  ask by SImon Haddad translate from so

Answer 1

Since you are new , I won't give you a duplicate link(由于您是新手 ，因此我不会给您重复的链接)

app.jsx(app.jsx)

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

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

};

signin.jsx(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(SignUpParagraph.js)

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

Comment if it worked(评论是否可行)