Objekt zu untergeordneter Komponente in React zuordnen

Question

Verwendung von React Ich versuche, eine analysierte JSON-Datei zu übergeben und das Objekt zu mappen. Aber da es sich um ein Objekt ist, kann ich nur das Objekt abbilden, wie unten mit Object.keys:

const question = Object.keys(questions).map((data, index) => 
    <QuestionList questions={data} key={index} /> 

jedoch diese Verwendung Ich bin nur in der Lage die oberste Ebene meiner Datenstruktur zuzugreifen. Also benutze diesen Code und gib mein Objekt weiter. Mit Object.keys() kann ich nur auf "questions" oder "q1" oder type, text, qId etc. zugreifen. Ich kann nicht alle Objekteigenschaften gleichzeitig übergeben und angeben, was ich in einer Kindkomponente benötige.

"questions": { 
    "q1": { 
     "qId": "1", 
     "type": "YN", 
     "text": "Text 1", 
     "tip": { 
     "logo": "assets/icons/gadgetz.svg", 
     "logofallback": "assets/img/gadgetz.png", 
     "heading": "Heading 1", 
     "text": "Text 2" 
     } 
    },... 

Was wäre der einfachste Weg, das gesamte Objekt mit Kindeigenschaften zu übergeben, damit ich diese in einer Kindkomponente verwenden kann? muss ich etwas anderes als Requisiten benutzen?

Answer 1

const questionObjects = Object.values(JSON.stringify(theJSONinYourQuestion)); 

const questionComponents = questionObjects.map(question => <Question qId={question.qId} />); 

Grundsätzlich verwenden Object.values statt Object.keys, und Sie haben eine schöne Auswahl an Fragen bekommen Sie verwenden können.

bearbeiten: Wenn Sie Ihre Umgebung zur Verfügung haben nicht Object.values in (it is experimental)

const originalQuestions = JSON.stringify(theJSONinYourQuestion); 
const questionKeys = Object.keys(orginalQuestions); 
const questionObjects = questionKeys.map(key => originalQuestions[key]); 
... 

Answer 2

Sie können es innerhalb eines .map Zugriff auf die Frage Objekt halten außerhalb dieses Bereichs zu einer Variablen durch die Zuordnung. Here's a jsBin zeigt die Idee

const objectOfQuestions = { 
    "questions": { 
     "q1": { 
      "qId": "1", 
      "type": "YN", 
      "text": "Text 1", 
      "tip": { 
       "logo": "assets/icons/gadgetz.svg", 
       "logofallback": "assets/img/gadgetz.png", 
       "heading": "Heading 1", 
       "text": "Text 2" 
      } 
     }, 
     "q2": { 
      "qId": "2", 
      "type": "YN", 
      "text": "Text 1", 
      "tip": { 
       "logo": "assets/icons/gadgetz.svg", 
       "logofallback": "assets/img/gadgetz.png", 
       "heading": "Heading 1", 
       "text": "Text 2" 
      } 
     } 
    } 
} 

const Question = ({ id, question }) => { 
    return (
    <div> 
     <h1>Question: {id}</h1> 
     <p>id: {question.qId}</p> 
     <p>type: {question.type}</p> 
     <p>text: {question.type}</p> 
    </div> 
) 
} 

const QuestionList = ({ questions }) => { 
    const questionObj = questions; 
    return (
    <div> 
     {Object.keys(questions.questions).map((key, i) => { 
     return (
      <div key={key}> 
      <Question id={key} question={questionObj.questions[key]} /> 
      </div> 
     ); 
     })} 
    </div> 
); 
} 

ReactDOM.render(<QuestionList questions={objectOfQuestions} />, document.getElementById('app'));