2017-02-20 8 views
0

React 사용 파싱 된 JSON 파일을 전달하고 객체를 통해 매핑하려고합니다. 이 객체가 난 단지 아래 Object.keys 사용하여 객체를 매핑 할 수있다 그러나보고 : React에서 자식 구성 요소에 객체 매핑

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

그러나이를 사용하여 난 단지 내 데이터 구조의 최상위 레벨에 액세스 할 수있게되었습니다. 그래서이 코드를 사용하고 내 객체를 전달합니다. Object.keys()를 사용하여 "questions"또는 "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" 
     } 
    },... 

하위 구성 요소에서 사용할 수 있도록 하위 속성과 함께 전체 개체를 전달하는 가장 쉬운 방법은 무엇입니까? 나는 소도구 이외의 것을 사용해야합니까?

+0

전체 개체를 전달할 수없는 이유는 무엇입니까? –

+0

예, 객체를 Prop 유형으로 전달할 수 있습니다. 문제는 당신이 webpack을 사용하는 경우 문제가 될 수있는 이미지 경로 인 값을 전달한다는 것입니다. – redconservatory

+0

아마도이 오류는 다른 곳에서 볼 수 있습니다. 나는이 작동하지 않습니다 생각하는 이유는이 코드로 인해 : '{JSON.stringify (this.props.questions)}' 만 반환 키 "질문", "Q1, Q2, Q3 ', 또는 "qId, type, text"어떻게 객체를 전달하는지에 따라 달라집니다. '{JSON.stringify (this.props.questions.q1)}'이라고 쓰면 객체가 비어 있습니다. – dwigt

답변

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

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

기본적으로, 대신 Object.keysObject.values 사용, 당신은 당신이 사용할 수있는 질문의 좋은 배열을 가지고있다.

편집 : 사용자 환경에서 당신이 (it is experimental)

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

을 사용할 수 Object.values이없는 경우에 당신은 그 범위 외부 변수에 할당하여 .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')); 
관련 문제