Как отрендерить компонент класса реакции с новыми данными об изменении маршрута

Question

Я хотел бы знать, как лучше всего использовать компонент класса React.

Я хочу повторно отобразить один и тот же компонент при навигации, чтобы появился тот же компонент, но со всеми новыми данными. У меня есть несколько вопросов, на которые пользователь должен ответить, но хотел бы, чтобы они появлялись на нескольких страницах, а не на одной. Затем пользователь будет отвечать на некоторые вопросы и сможет go взад и вперед просматривать свои ответы. Я использую Redux для хранения данных.

<Route path="/" exact render={(props) => <Home />} />
<Route to='/Questions' exact render={(props) => <Questions {...props} complete={this.finished} />} />




class Questions extends React.Component {
renderQuestions() {
    return this.props.dataAss.map((quest) => {
        if (quest) {
            return this.props.questions.map((q, questIdx) => {
                return (
                    <div key={q.id}>
                        <div className={this.state.question}>
                            <div id={q.id}>
                                <h3 className={this.state.title}>{q.title}</h3>
                                <SanitizedHTML html={`<p>${q.questionText}<p>`} />
                                <div key={q.id}>
                                    {q.options.map((opt, optIdx) => (
                                        <div key={opt.id} >
                                            <button key={opt.id}
                                                ref={this.options}
                                                className={`                                                            
                                                ${this.props.dataPersisted.singleSelection.includes(q.id + opt.id) && !q.multi ? "selected" : ""}                                                               
                                                ${this.props.dataPersisted.selection.includes(q.id + opt.id) ? "selected disabled" : ""}                                    
                                                ${this.props.dataPersisted.optState.includes(q.id + opt.id) && q.multi ? "selected" : ""}                                                                                           
                                                ${this.props.dataPersisted.questionState.includes(q.id) ? "disabled" : ""}                                                                                      
                                                ${this.state.options} ${this.props.dataPersisted.disabled} ${opt.val}
                                                `}
                                                disabled={this.props.dataPersisted.disabled} id={opt.id} onClick={(e) => {
                                                    q.multi ? this.multiToggle(e, q, opt) : this.singleToggle(e, q, opt);
                                                    e.stopPropagation();
                                                    this.InitialbuttonStates(questIdx);
                                                }}
                                            >
                                                <span>{opt.label}</span>
                                                {opt.text}
                                            </button>

                                        </div>
                                    ))}
                                </div>
                                <button
                                    className={`${this.state.submit}`}
                                    disabled={`${(questIdx === this.state.checkAns) ? "" : "disabled"}`}
                                    onClick={(e) => { this.checkAnswer(e, q) }}
                                >
                                    Check Answer
                              </button>
                                <PopUp
                                    correct={this.state.correct}
                                />
                            </div>

                        </div >
                        <div className={this.state.image}>
                            <img src={q.img} alt={q.alt}></img>
                        </div>
                    </div >
                );
            });
        }
    })
}

Answer 1

То, что я хотел бы сделать, это гарантировать, что я могу однозначно идентифицировать оценку (например, с помощью ids).

После этого я создам Assessment компонент, который будет загружать вопросы на основе на id на креплении. Этот компонент будет отображать компонент Questions.

Наконец, я бы предоставил такой идентификатор с URL-параметром .

PS: Предложение: у меня будет Question компонент для отображения одного вопроса и нескольких Question в компоненте Assessment с использованием Array.prototype.map () .