如何在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安裝的反應組件

回答

相關問題