React JS，如何将数据从MDX文件传递到组件？

Question

我有一个 mdx 文件，其中包含一些数据来创建博客文章。 mdx文件结构如下

---
title: MDX is Magical2!
path: /mdx2
date: 2019-08-25
---

import Diary from "../../components/Diary";

export const days = [
  {
    daytitle: "Day1",
    description: "desc 1",
    cover: "./img.jpg"
  },
  {
    daytitle: "Day2",
    description: "desc 2",
    cover: "./img.jpg"
  },
];

<Diary data={days} />

我的组件日记如下：

import React from 'react';

const Diary = ({ data }) => (
  <div >
    <h2 
    >
    
        {data.days.daytitle}
    </h2>    

  </div>
  
);

export default Diary;

这给了我错误：无法读取未定义的属性（读取“天”）

有人可以帮我解决这个问题吗？

谢谢

我尝试过的另一个版本是

import React from 'react';

const Diary = ({ daytitle }) => (
  <div >
    <h2 
    >
    
        {daytitle}
    </h2>    

  </div>
  
);

export default Diary;

这不显示任何内容

Answer 1

你很接近！

days

是一个对象数组，但您在代码中没有这样对待它。将您的

Diary

组件更改为类似这样的内容，以便它循环遍历

days

并为数组中的每一天显示

h2

：

import React from 'react';

const Diary = ({ data }) => (
  <div>
    {data.map(day => {
        return (
            <h2>
                {day.daytitle}
            </h2>  
        )
    })
  </div>
  
);

export default Diary;

Answer 2

您传递的数据是一个（天数）数组。

并且您正在尝试读取该数组的

days

属性。数组没有

days

属性。

如果你想要一个接受数组然后迭代它的组件，你必须使用

.map

:

const Diary = ({ days }) => (
  <>
    {days.map((day, key) => (
      <div key={key}>
        <h2>{daytitle}</h2>
      </div>
    ))}
  </>
)

---

或者你可以有一个 DiaryEntry 负责渲染一天并处理外部的循环/映射：

const DiaryEntry = ({ day }) => (
  <div >
    <h2
    >
      {daytitle}
    </h2>    
  </div>
)

并将其用作：

import DiaryEntry from '../../components/DiaryEntry'

const Diary = () => (
  <>
    {days.map((day, key) => (
      <DiaryEntry key={key} day={day} />
    ))}
  </>
)

注意：映射时需要一个

key

。它不一定是数组中元素的

index

。 React 使用它来识别数组中的元素。它必须是唯一标识符（例如：

uuid

或实际日期。