Как использовать компонент, реагирующий на npm, в JSX

Question

Я пытаюсь использовать сторонний компонент реакции (react-slick) в моем JSX и столкнулся с проблемой. Я пытаюсь использовать его очень похоже на пример this, созданный создателем приложения (ниже пример example1.jsx).

Всякий раз, когда я делаю это я получаю 2 предупреждения и ошибки:

Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform.

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory

Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

Я также пытался что-то подобное, как example2.jsx, которое было найдено решение в другой переполнения стека вопрос. Однако, хотя никаких предупреждений или ошибок не было, в этом случае код вообще не отображался.

Я пробовал различные методы использования React.createFactory (который не должен использоваться в JSX для начала) и других финалистов, но без результатов.

Это, наверное, глупый вопрос, но как, черт возьми, я использую установленные компоненты npm в своем JSX?

example1.jsx

var React = require('react'); 
var Slider = require('react-slick'); 

var SingleItem = React.createClass({ 
    render: function() { 
    var settings = { 
     dots: true, 
    } 
    return (
     <div> 
     <h3> Image slider with one item at a time</h3> 
     <Slider dots={true}> 
      <div><img src="/img/autumn.jpg" alt=""/></div> 
      <div><img src="/img/sun.jpg" alt=""/></div> 
     </Slider> 
     </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
    return (
     <div className='container'> 
     <SingleItem /> 
     </div> 
    ); 
    } 
}); 

example2.jsx

var App = React.createClass({ 
    render: function() { 
    return (
     <div className='container'> 
     {SingleItem} 
     </div> 
    ); 
    } 
}); 

Answer 1

Похоже, что вы не на самом деле ссылки на компонент слайдера. Вы можете обнаружить, что ваше решение выглядит как

var Slick = require('react-slick'); 
var Slider = Slick.Slider 

Используйте отладчик, чтобы проверить, что объект вы фактически дается требуется. Также возможно, что вам необходимо потребовать компонент, напрямую ссылаясь на один из файлов библиотек, например.

var Slider = require('./slider.jsx'); 

Посмотрите также на каталог lib или dist, вы можете увидеть значение module.exports для вашего требования.

Answer 2

Используйте это, чтобы включить Slick компонент Slider:

var Slider = React.createFactory(require('react-slick'));