我正在进行一个附带项目，其中我有条件地希望根据用户的回答向他们提出一系列问题。我谨此命令：
步骤1.我询问用户是否拥有特定的帐户/会员资格步骤2.如果是，我将显示一系列问题，如果他们在该帐户/会员资格步骤3中拥有评级。如果是，我将显示一个输入，询问他们特定的评级
为了实现这一点，我有一个父组件来询问初始问题（步骤1）。我有一个可重用的子组件，它有条件地为步骤1（步骤2）中的每个问题显示，并且每个问题都来自于道具。然后我有了第二个可重用组件，该组件在第2步中有条件地显示，它要求评级，并且它的措辞也来源于道具（第3步）
我的挑战是，在第2步中，我希望我的组件有n个状态，其中n是我传递给它的数组的大小，这样我就可以跟踪是否应该在第3步中显示每个问题。是否有方法做到这一点，或者有更优雅的解决方案？理论上，我可以在这个组件树的顶部对每个状态进行硬编码，然后将状态作为道具传递，但我认为有一种更优雅的方法可以做到这一点。
我的代码如下：
初始表格（步骤1）

export default function ChessForm() {
    const [FIDE, setFide] = useState(false)
    const [USCF, setUSCF] = useState(false)
    const [Chesscom, setChesscom] = useState(false)
    const [LiChess, setLiChess] = useState(false)

    return (
        <Form>
            <p>Please fill out the below form</p>
            <Form.Group>
                <Form.Label className='mx-2'>Do you have a FIDE membership?</Form.Label>
                <Form.Check inline label='Yes' value={true} name='FIDE' type='radio' className = 'mx-2' name='FIDE'  onClick = {()=>{setFide(true)}}/>
                <Form.Check inline label='No' value ={false} name='FIDE'  type='radio' className = 'mx-2' defaultChecked  onClick={()=>{setFide(false)}}  />
            </Form.Group>

            {FIDE && <MembershipForm inputs={['standard', 'rapid', 'blitz']} name='FIDE'/>}

            <Form.Group>
                <Form.Label className = 'mx-2'>Do you have a USCF membership?</Form.Label>
                <Form.Check inline label='Yes' name='USCF' type='radio' className = 'mx-2'  onClick={()=>{setUSCF(true)}} />
                <Form.Check inline label='No' name='USCF'  type='radio' className = 'mx-2' defaultChecked onClick={()=>{setUSCF(false)}} />
            </Form.Group>

            {USCF && <MembershipForm inputs={['regular', 'quick', 'blitz']} name='USCF'/>}

            <Form.Group>
                <Form.Label className = 'mx-2'>Do you have a Chess.com account?</Form.Label>
                <Form.Check inline label='Yes' name='Chesscom' type='radio' className = 'mx-2' onClick={()=>{setChesscom(true)}}/>
                <Form.Check inline label='No' name='Chesscom'  type='radio' className = 'mx-2' defaultChecked onClick={()=>{setChesscom(false)}}/>
            </Form.Group>

            {Chesscom && <MembershipForm inputs={['bullet', 'blitz', 'rapid', 'Daily', 'puzzle']} name='USCF'/>}

            <Form.Group>
                <Form.Label className = 'mx-2'>Do you have a LiChess account?</Form.Label>
                <Form.Check inline label='Yes' name='LiChess' type='radio' className = 'mx-2' onClick={()=>{setLiChess(true)}} />
                <Form.Check inline label='No' name='LiChess'  type='radio' className = 'mx-2' defaultChecked onClick={()=>{setLiChess(false)}} />
            </Form.Group>

            {LiChess && <MembershipForm inputs={['bullet', 'blitz', 'rapid', 'Classical', 'Correspondence' , 'puzzle']} name='USCF'/>}
        </Form>
    )
}

步骤2表单（可重用组件）*注意我目前有一个标准、快速和 lightning 的状态。这是问题的症结所在。我希望状态是动态的，基于我传递给这个组件的道具。

import React, {useState} from 'react'
import {Form} from 'react-bootstrap'
import RatingInput from './RatingInput'

export default function MembershipForm({inputs, name}) {
    const [standard, setStandard] = useState(false)
    const [rapid, setRapid] = useState(false)
    const [blitz, setBlitz] = useState(false)

    const questions=inputs.map(input => {
            return (
                <>
                    <Form.Group>
                        <Form.Label className='mx-2'>Do you have a {name} {input} Rating?</Form.Label>
                        <Form.Check inline label='Yes' value={true} name={name+input} type='radio' className = 'mx-2' onClick = {()=>{setStandard(true)}}/>
                        <Form.Check inline label='No' value ={false} name={name+input}  type='radio' className = 'mx-2' defaultChecked onClick = {()=>{setStandard(false)}}  />
                    </Form.Group>
                    {standard && <RatingInput name={input}/>}
                </>
            )
        })
    return (
        <div className='ml-3'>
            {questions}
        </div>
    )
}

步骤3：最后，这是我想根据上述组件的状态有条件地显示的第三个组件

import React from 'react'
import {Form, Container, Row, Col} from 'react-bootstrap'

export default function RatingInput({name}) {
    return (
        <Container>
            <Row>

                <Col><Form.Label inline>What is your {name} rating?</Form.Label></Col>
                <Col><Form.Control type='number' min ={500} max ={3200} className='w-50 h-75' /></Col>
            </Row>
            <Form.Group>

        </Form.Group>
        </Container>

    )
}