将对象映射到React中的子组件

使用React我想传递一个解析的JSON文件并映射到对象。但是看到它是一个对象，我可以如下使用Object.keys只映射对象：将对象映射到React中的子组件

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

什么是最简单的方法来传递整个对象的子属性，所以我可以在子组件中使用它们？我必须使用道具以外的东西吗？

来源

2017-02-20 dwigt

为什么你不能传递整个对象？ –

是的，你可以传递一个对象作为一个Prop类型。我认为问题在于您传递的是图片路径的值，如果您使用的是webpack，这可能是一个问题。 – redconservatory

也许错误是在别处看到，因为你说这应该起作用。究其原因，我认为这是行不通的，因为这样的代码： '{JSON.stringify（this.props.questions）}' 只返回键 “问题”， “Q1，Q2，Q3”，或“qId，type，text”取决于我如何传递对象。如果我写'{JSON.stringify（this.props.questions.q1）}'对象是空的。 – dwigt

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

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

基本上，使用Object.values代替Object.keys，并且你已经有了一个可以使用的问题一个很好的阵列。

编辑：如果你没有Object.values可不要在您的环境(it is experimental)

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

来源

2017-02-20 16:50:31

您可以通过将其分配到该范围之外的变量保持.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'));

来源

2017-02-20 17:36:27 Kunal

将对象映射到React中的子组件

回答

相关问题