javascript - 按钮单击根据一些参数更改 div 内容

Question

我有下面的代码，我想要它做的是:当我单击测验按钮时，其中带有 renderComponent 的 div 呈现测验列表，就像在 QuizList 函数中一样，当我按下成员按钮时，我想要相同的 div 呈现MemberList 函数中的成员列表，但我无法做到，你能帮我吗？

class GroupPage extends React.Component {
    constructor(props){
        super(props);
        this.state={
            members:[],
            quizzes:[]
        }

    }

    QuizList = () =>{
        const {quizzes} = this.state;
        return(
            <div>{
                
                quizzes.map(({id,...otherQuizProps}) => (
                            <QuizItem key={id} id={id}{...otherQuizProps}/>
                        ))
                }
            </div>
        )
    }
    MemberList = () =>{
        const {members} = this.state;
        return(
            <div>{
                members.map(({id,...otherMemberProps}) => (
                            <GroupMember key={id} id={id}{...otherMemberProps}/>
                        ))
                }
            </div>
        )
    }
    
    renderComponent = (component) =>{
        switch(component){
          case "QuizList":
            return <this.QuizList/>
          case "MemberList":
            return <this.MemberList/>
          default:
            return <this.QuizList/>
        }
      }

    

    render(){
        const {quizzes,members} = this.state;
    return(
        <div className='group-page'>
            <div className='group-controls'>
                <div className='group-buttons'>
                    <button onClick={}>Quizzes</button>
                    <button onClick={}>Members</button>
                </div>
            </div>
            <div>
                {this.renderComponent()};
            </div>
        </div>
    )}
};

Answer 1

在 render 方法中，您不向 renderComponent 提供任何参数.所以每次都是default case 会被返回，因为参数 component是 undefined .
我会将当前选择存储在组件的状态中，并相应地使用按钮进行设置。

    constructor(props){
        super(props);
        this.state={
            members:[],
            quizzes:[],
            currentMode: 'QuizList',
        }
    }
...

    render(){
        const {quizzes,members, currentMode} = this.state;
    return(
        <div className='group-page'>
            <div className='group-controls'>
                <div className='group-buttons'>
                    <button onClick={()=>this.setState({currentMode:'QuizList'}) }>Quizzes</button>
                    <button onClick={()=>this.setState({currentMode:'MemberList'}) }>Members</button>
                </div>
            </div>
            <div>
                {this.renderComponent(currentMode)};
            </div>
        </div>
    )}
    }