如何在路由更改时使用新数据重新渲染react类组件

Question

我想知道重用React类组件的最佳方式是什么。

我想在导航中重新呈现相同的组件，这样相同的组件就会出现，但会包含所有新数据。我基本上有一些问题需要用户回答，但希望它们出现在多个页面上，而不是全部出现在一个页面上。然后，用户将回答一些问题，并能够来回查看他们的答案。我正在使用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组件。

最后，我将为这样的id提供一个URL参数。

PS：一个建议：我会有一个Question组件来呈现一个问题，并使用Array.prototype.map((在Assessment组件中呈现多个Question。