react-styleguidist - 以组件作为道具的示例 - SyntaxError: 不能在模块外使用 import 语句

Question

I have a component that has props that are components.

Component example:

```jsx
import FavoriteBorder from '@material-ui/icons/FavoriteBorder'
import Favorite from '@material-ui/icons/Favorite'

return (
<Component
  favIcon={{
    icon: FavoriteBorder,
    iconSelected: Favorite,
  }}
/>
)
```

Error

SyntaxError: Cannot use import statement outside a module

How can I import props

Answer 1

It turns out the ; is the key to this problem.

PropertyCardNew example:

```jsx
import FavoriteBorder from '@material-ui/icons/FavoriteBorder'
import Favorite from '@material-ui/icons/Favorite'
;<PropertyCardNew
  images={
    [
      {
        url: 'https://www.commerciallistings.cbre.co.uk//resources/fileassets/GB-Plus-480572/09e35192/11%20Strand%201_Photo_1_small.jpg',
        alt: "An Image"
      },
      {
        url: 'https://www.commerciallistings.cbre.co.uk//resources/fileassets/GB-Plus-480572/09e35192/11%20Strand%201_Photo_1_small.jpg',
        alt: "An Image"
      }
    ]
  }
  title="PricewaterhouseCoopers"
  favIcon={{
    icon: FavoriteBorder,
    iconSelected: Favorite,
  }}
  subTitle="4th floor"
  street="313 Stoughton Rd Edgerton, WI 53534-1132"
  date="September"
  desks="20+"
  rent="$5600"
  labels={{
    date: 'date',
    desks: 'desks',
    rent: 'Monthly rent',
    link: 'Details',
  }}
  link="https://commerciallistings.cbre.co.uk"
/>

```

I hope this helps somebody.