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

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

我想使用“use state”，但我应该从哪里开始呢。我将显示我开始但被阻止的代码，说明如何继续

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;

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

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

};

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“./components/sign-in/SignIn”导入登录；
从“/组件/登录/注册选择业务选项”导入注册选项；
const[signUp，setSignUp]=useState（false）；
常量应用=（）=>{
如果（注册）{
返回
}
返回
};
导出默认应用程序；

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;

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> 

const SignIn=（）=>(
登录
忘记用户名或密码
没有帐户？注册吧
)
导出默认签名；

---

因此，在登录中，如果我按我想加载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;

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

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

};

const[signUp，setSignUp]=useState（false）；
常量应用=（）=>{
如果（注册）{
返回
}
返回
};

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;

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> 

const SignIn=（道具）=>(
登录
忘记用户名或密码
没有帐户？注册吧

SignUpParagraph.js

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

const SignUpParagraph=（道具）=>(
props.setSignUp（true）}>//这里有什么吗

---

评论是否有效

尽管你已经找到了答案，但我仍然可以在路上给你另一种方法

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

---

问候语

所以当他们点击ssignUpPargrah时，您想将他们发送到signUp.jsx？可能与您查看的react router重复？您不会真正传递状态，状态是组件的本地状态，或者由状态管理库处理的应用程序状态（虽然这两种方法都不适合您当前的问题，但路由机制可能是）另一种可能有用的方法（不太通用，重点是两种解决方案）然而，重复问题的重复链接是避免混乱的正确行为。对不起，伙计们，是的，确实有效，我感谢你们，下次我会更深入地搜索我的答案