reactjs - 如何在 React styleguidist 中将道具传递给 Readme.md 文件中的组件？

Question

我需要在 readme.md 文件中显示反应组件，但它需要具有字符串数组的道具。为 .md 文件中定义的组件传递道具的正确方法是什么？

我试图参考文档中的示例，但在输出中出现错误。

下面是我在组件中传递的数据。

常量数据 = {dropdownvalues: [{label: '10',value: '10'}]};

我需要将它们传递给文档中的组件。

<Dropdown data={data}></Dropdown>

如何在 .md 文件中定义数据。

Answer 1

Dropdown.js

import React from 'react';

export default function Dropdown (props) {
  const { dropdownValues } = props.data
  return (
    <select>
      { dropdownValues.length && dropdownValues.map(data => {
          return (<option value={data.label}>{data.value}</option>)
        })
      }
    </select>
  )
}

下拉列表.md

```
<Dropdown data={{ "dropdownValues": [{ "label": "10", "value": "10", key: "1" }] }}></Dropdown>
```

希望有帮助！！！

Answer 2

您可以在组件中使用默认道具来防止：D