Question

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

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

Answer 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]);
...

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

在React

2 个答案: