嵌套表示/容器組件和可重用性

Question

我對寫我的表示/容器組件的方式感到非常困惑/不確定。尤其是在嵌套多種方式時。我很想談談如何更好地分離這些問題。

以下是我的（相關）redux狀態時合併（非常簡化）。

{ 
    questions: [ // Need to get fetched from redux via selector 
     { 
      id: 1, 
      questionAnswers: [ // Need to get fetched from redux via selector 
       { 
        id: 1, 
        question: 'some question', 
        amount: 10 // Need to get fetched from redux via selector 
       }, 

       { 
        id: 2, 
        question: 'some question', 
        amount: 10 // Need to get fetched from redux via selector 
       } 
      ] 
     }, 

     { 
      id: 2, 
      questionAnswers: [ // Need to get fetched from redux via selector 
       { 
        id: 3, 
        question: 'some question', 
        amount: 10 // Need to get fetched from redux via selector 
       }, 

       { 
        id: 4, 
        question: 'some question', 
        amount: 10 // Need to get fetched from redux via selector 
       } 
      ] 
     }, 
    ] 
} 

因此，目前我創建了以下組件來呈現這與正確的數據，它工作正常。

網頁組件

const Page1 =() => ({ 
    <QuestionList /> 
}); 

QuestionList（容器）

// Gets all questions from the store 
const QuestionList = ({ questions }) => ({ 
    {questions.map(question => <Question question={question} />)} 
}); 

問題（容器）

// Gets all questionAnswers for a question from the store 
const Question = ({ question, questionAnswers }) => ({ 
    <div> 
     <h3>The question itself</h3> 
     <div>{questionAnswers.map(answer => <QuestionAnswer answer={answer} />)}</div> 
    </div> 
}); 

問題答案（容器）

// Gets the amount for each QuestionAnswer from the store 
const QuestionAnswer = ({ answer, amount }) => ({ 
    <div> 
     <div>{answer}</div> 
     <div>{amount}</div> 
    </div> 
}); 

問題是當我要重複使用的questionList組分與從存儲不同的數據。我將如何最好地解決這個問題？我是否應該將所有數據連接到頂層QuestionList而不是QuestionAnswer並使所有子組件都是表示性的？這感覺很奇怪，因爲它需要包含所有的questions，questionAnswers和questionAnswer amounts。

Answer 1

是的，我認爲你的想法是正確的。 不會讓QuestionList提出問題請求，Page組件應該請求數據，然後將其作爲道具傳遞給QuestionList，如<QuestionList questions={this.state.questions} />。這樣，您可以在任何地方重複使用QuestionList，只需向其提供您關心的數據。