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

Question

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

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

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

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

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

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

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

Answer 1

您可以在组件中使用默认 Props 来防止这种情况发生 :D

Answer 2

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>
  )
}

Dropdown.md

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

希望对您有所帮助！！！

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

how to pass props into a component in Readme.md file in react styleguidist?

reactjs

react-styleguidist