如何在JSX中使用npm安装的反应组件

我正尝试在我的JSX中使用第三方反应组件（react-slick）并且遇到问题。我试图在应用程序创建者的示例this中非常类似地使用它（下面的example1.jsx代码段）。如何在JSX中使用npm安装的反应组件

每当我这样做，我得到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中使用）的各种方法，以及其他finagling，但没有结果。

这可能是一个愚蠢的问题，但我该如何在我的JSX中使用npm安装的组件？

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

来源

2015-09-25 Brian

您是否使用browserify或的WebPack？ –

当前正在使用webpack – Brian

不确定react-slick是否允许直接应用设置，就像您使用dots = {true}所做的那样，而不是您可以使用来引用在渲染上设置的设置对象。 – Thomas

它看起来像你实际上并没有引用滑块组件。您可能会发现您的解决方案看起来更像

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

使用调试器来检查您实际上由require提供的对象。也可能需要通过直接引用其中一个库文件来需要一个组件。

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

看一看lib或dist目录，你也可以看到你的require的module.exports值。

来源

2015-09-26 16:22:59 Alex

使用此功能可以包括油滑滑块组件：

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

来源

2016-01-19 09:54:25

如何在JSX中使用npm安装的反应组件

回答

相关问题