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

我将做的是保证我可以唯一标识评估（例如，使用footnotesize）。

此后，我将创建一个ids组件，该组件将基于安装时的Assessment加载问题。该组件将呈现id组件。

最后，我会提供一个URL Parameter这样的ID。

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

如何使用路线更改的新数据重新呈现React类组件

1 个答案: