如何从MDX文件向React组件传递数据？报错求助

问题原因分析 #

1. 第一个组件报错原因
   你在MDX中传递给Diary的data就是定义好的days数组（本身是数组类型，并非包含days字段的对象），但组件代码里错误地尝试访问data.days.daytitle——数组不存在days属性，因此会抛出Cannot read properties of undefined (reading 'days')的错误。

2. 第二个组件无内容原因
   第二个组件期望接收daytitle属性，但你在MDX中是通过data={days}传递的数组，组件根本没拿到daytitle这个props，自然无法渲染内容。

解决方案 #

方案一：组件内遍历数组渲染

修改Diary组件，直接遍历传入的数组数据，逐个渲染每个条目：

import React from 'react';

const Diary = ({ data }) => (
  <div>
    {data.map((item, index) => (
      <h2 key={index}>
        {item.daytitle}
      </h2>
    ))}
  </div>
);

export default Diary;

• 用map遍历传入的data数组（即MDX中的days）
• 每个数组元素是包含daytitle的对象，直接取item.daytitle即可
• 添加key属性是React列表渲染的必填规范

方案二：MDX内遍历传递单个属性

如果想保留第二个组件的写法，可在MDX中遍历数组，给每个Diary组件单独传递daytitle：

---
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"
  },
];

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

此时你的第二个组件就能正常渲染每个daytitle内容。

内容的提问来源于stack exchange，提问作者Davide Davide