Сопоставление объекта с дочерним компонентом в реакторе

Question

Использование React Я пытаюсь передать проанализированный JSON-файл и отобразить его через объект. Однако, видя, как это объект, который я могу только отобразить объект, используя Object.keys, как показано ниже:

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

Однако при использовании этого я только в состоянии получить доступ к верхнему уровню моей структуры данных. Поэтому, используя этот код и передавая мой объект. Использование Object.keys() Я могу получить доступ только к «вопросам» или «q1» или типу, тексту, qId и т. Д. Я не могу передать все свойства объекта сразу и указать, что мне нужно в дочернем компоненте.

"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" 
     } 
    },... 

Что бы самый простой способ передать весь объект с детьми свойствами, так что я могу использовать их в качестве компонента ребенка? мне нужно использовать что-то другое, кроме реквизита?

Answer 1

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

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

В принципе, использовать Object.values вместо Object.keys, и у вас есть хороший набор вопросов, которые вы можете использовать.

Edit: если у вас нет Object.values доступны в среде (it is experimental)

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

Answer 2

Вы можете сохранить доступ к объекту вопроса внутри .map, назначив его переменной вне этой сферы. Here's a jsBin с указанием идеи

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'));