React React с использованием компонента js - PullRequest
Новая
       57

React React с использованием компонента js

0 голосов
/ 14 апреля 2019

У меня проблемы с js interop.Я пытаюсь использовать компонент js response-slick так: 

// src/interop/Carousel.js
import React from 'react'
import Slider from 'react-slick'

export function Carousel(props) {
  return (
    <Slider>
      <div>
        <h3>{props.name} 1</h3>
      </div>
    </Slider>
  )
}


/* src/Carousel.re */
[@bs.module  "./interop/Carousel"] [@react.component]
external  make: (~name: string) =>  React.element  =  "";

/* src/index.re */
ReactDOMRe.renderToElementWithId(<Carousel  name="ahaha"  />,  "carousel");

Но встретил эту ошибку в веб-пакете: 

ERROR in ./lib/js/src/Index.bs.js
Module not found: Error: Can't resolve './interop/Carousel' in '[...]/reason_react_example/lib/js/src'
 @ ./lib/js/src/Index.bs.js 6:15-44

Так это выглядиткак BS не учитывает файл Carousel.js при компиляции?

кстати, я слежу за этим документ разумного реагирования

Ответы [ 2 ]

2 голосов
/ 14 апреля 2019

BuckleScript будет помещать сгенерированные js-артефакты в lib/js/... по умолчанию, поэтому вам нужно либо написать свой импорт относительно этого, либо настроить bsb, чтобы поместить артефакты вместе с исходными файлами. Вы делаете последнее, устанавливая "in-source": true для данного package-spec в bsconfig.json. E.g.:

{
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  }
}

См. Документацию для элемента конфигурации package-specs .

1 голос
/ 14 апреля 2019

После некоторых настроек, вот что у меня работает: 

// lib/js/src/interop/Carousel.js
import React from 'react'
import Slider from 'react-slick'

const Carousel = props => {
  return (
    <Slider>
      <div>
        <h3>{props.name} 1</h3>
      </div>
    </Slider>
  )
}

export default Carousel


// src/Carousel.re    
[@bs.module "./interop/Carousel"] [@react.component]
external make: (~name: string) => React.element = "default"; // handle default export

// src/Index.re
ReactDOMRe.renderToElementWithId(<Carousel name="it works!" />, "carousel");

Поскольку Carousel.js использует es6 и jsx, мне нужно настроить webpack для работы с ним ( es6 , jsx ).И bsconfig.json должен иметь следующие настройки: 

"reason": {
  "react-jsx": 3
},
"package-specs": [
  {
    "module": "commonjs",
    "in-source": false
  }
]
...