[英]How to pass a state from the child to app component
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.我想使用 ```use state`` 但我打算从哪里开始呢? I will show code of what I started but blocked on how to continue
我将展示我开始但被阻止如何继续的代码
app.jsx应用程序.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登录.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
Since you are new , I won't give you a duplicate link由于你是新手,我不会给你重复的链接
app.jsx应用程序.jsx
const [signUp, setSignUp] = useState(false);
const App = () => {
if (signUp) {
return <SignUpOptions/>
}
return <SignIn setSignUp={setSignUp}/>
};
signin.jsx登录.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评论是否有效
Although you already found an answer I can still give you another method on your way.尽管您已经找到了答案,但我仍然可以为您提供另一种方法。
With React Context you could make functions in you index/app.js and call them with you child component.使用 React Context,您可以在 index/app.js 中创建函数并使用您的子组件调用它们。 This is an lightweight alternative which works very well, aswell with hooks.
这是一个轻量级的替代方案,它与钩子一起工作得很好。
Greetings问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.