使用React我试图传递一个解析的JSON文件并映射该对象。但是看到它是一个对象,我只能使用Object.keys映射对象,如下所示:
const question = Object.keys(questions).map((data, index) =>
<QuestionList questions={data} key={index} />
但是使用它我只能访问我的数据结构的顶层。所以使用这段代码并传递我的对象。使用Object.keys()我只能访问&#34;问题&#34;或&#34; q1&#34;或类型,文本,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 :(得分:1)
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]);
...
答案 1 :(得分:1)
您可以通过将问题对象分配给该范围之外的变量来维护对.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'));