我有 2 个组件,它们都有子组件, 在其中一个组件中,如果单击子组件,我想将其传输到应用程序组件,以便它为我呈现一个全新的组件
我想使用 ```use state`` 但我打算从哪里开始呢?我将展示我开始但无法继续的代码
应用程序.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;
登录.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
最佳答案
因为你是新手,我不会给你一个重复的链接
应用程序.jsx
const [signUp, setSignUp] = useState(false);
const App = () => {
if (signUp) {
return <SignUpOptions/>
}
return <SignIn setSignUp={setSignUp}/>
};
登录.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>
注册段落.js
const SignUpParagraph = (props) => (
<div onClick={()=>props.setSignUp(true)}>//anything you have in here </div>
评论是否有效
关于javascript - 如何将状态从子组件传递到应用程序组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59096877/